时间戳

首页 > 解决方案 > 如何计算与矩形外接的圆的大小？

javascript - 如何计算与矩形外接的圆的大小？

问题描述

我正在尝试重新创建此处显示的材质波纹效果：https ://material.angular.io/components/ripple/examples

height: 36px;我创建了一个按钮（一个带有and的元素padding: 0 16px;（其中也有一些文本）并实现了一个算法来根据用户的点击位置计算涟漪的位置，以及另一个算法来找到涟漪效应的最小可能大小（矩形的对角线长度。如果用户直接单击按钮的中心，将应用此测量值）。

用户点击的位置被格式化为从左侧开始的像素 (PosX) 和从顶部开始的像素 (PosY)。

PosX: 27
PosY: 16

我似乎无法弄清楚当用户单击矩形内的任何给定点时如何计算圆的直径。例如，假设我们有一个 30 像素 x 40 像素的矩形。如果用户直接点击矩形的中心（PosX: 15, PosY: 20），则创建的波纹将具有 50px 的高度和宽度，并将位于矩形的中心，完美地覆盖整个形状。

但是，例如，如果用户向左并向上点击一点怎么办？假设用户点击PosX: 10, PosY: 12。找到波纹中心的位置相当容易：

ripple.style.left = PosX - rippleSize / 2 + "px";
ripple.style.top = PosY - rippleSize / 2 + "px";

但是当用户点击和时，我如何找到rippleSize ？PosX: 10PosY: 12

我希望我在这里包含了足够的信息。如果您需要更多信息，请告诉我。

这是我到目前为止的工作：https ://codepen.io/BlackKnightNick/pen/abNmZbz

编辑：我想它看起来像某种从中心开始的径向渐变，它将确定圆的比例（最小尺寸，用户点击最中心，transform: scale(1)最大尺寸，用户点击其中一个角落，是transform: scale(2)。不确定这是否有帮助，但我决定添加它以防万一。

标签： javascripthtmlmaterial-design

解决方案

就整体公式而言，要获得比例因子，您可以执行以下操作：

D = button diagonal length
C = distance from click to button center

scale = (((((D / 2) - C) / (D / 2)) - 1) * -1) + 1

这将产生 和 之间的1结果2。您需要计算点击与按钮中心之间的距离，这应该与您计算按钮对角线长度的方式类似。

或者，您可以使圆的半径等于按钮的对角线长度，然后不必担心根据单击位置调整它的大小。

推荐阅读