如何计算与矩形外接的圆的大小？答案

【问题标题】：How can I calculate the size of a circle which is circumscribing a rectangle?如何计算与矩形外接的圆的大小？
【发布时间】：2020-12-08 10:34:24
【问题描述】：

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

我创建了一个按钮（一个带有 height: 36px; 和 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";

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

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

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

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

【问题讨论】：

我查看了 Material Ripple Effect，在我看来，初始圆的直径是恒定的，并且仅取决于矩形大小 - 而不是点击位置。

标签： javascript html material-design

【解决方案1】：

正如@Jonathan 在评论中提到的，这可以通过为rippleSize 设置一个常量值来实现。但这可能不会产生所需的效果。这是一个简单的方法：

let x = PosX, y = PosY, h = buttonHeight, w = buttonWidth;
let rippleSize = Math.sqrt( Math.max( x*x + y*y , x*x + (h-y)*(h-y),
                                  (x-w)*(x-w) + (h-y)*(h-y), (w-x)*(w-x) + h*h));

这里我只是简单地计算每个角的距离，并取其中最大的值。如果你愿意，这个逻辑可以很容易地抽象成一个函数。

function distance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
}

let rippleSize = Math.max(distance(0,0,x,y),distance(0,h,x,y),
                          distance(w,0,x,y),distance(w,h,x,y));

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：