从该图像中心生长的图像上的圆形蒙版答案

【问题标题】：Round mask on an image growing from centre of that image从该图像中心生长的图像上的圆形蒙版
【发布时间】：2011-05-25 23:31:33
【问题描述】：

单击某个按钮后，我需要显示一张黑胶唱片的图像。该图像将出现在按钮旁边的某个位置，并且是一个透明的 png 以使其看起来是圆形的。问题是它需要使用圆形蒙版来显示，该蒙版从图像中心的一个点开始动画并扩展以显示整个“记录”。如何创建一个圆形动画蒙版，在不缩放/重新缩放图像的情况下显示“记录”图像。

有没有人知道一个 JavaScript 或者最好是 jQuery 库能够做到这一点？

如果你用不同的语言知道这样的事情，它可能会帮助我写一些我自己的东西。

谢谢。

【问题讨论】：

【解决方案1】：

HTML 通常是矩形，如果您有一个透明的图像，那么您可以缩放它，保持中心不变。

如果您需要它只能在圆内选择，那么您需要检查鼠标坐标以进行单击操作，以查看它是否在圆内，是否在包含矩形内。见：How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

@6bytes 建议使用圆角。

Chrome 和 FireFox 目前通过 border-radius 和 -moz-border-radius CSS 属性围绕圆角，因此您可以使用50% 边框半径在视觉上实现圆形。但是，这只是底层矩形的视觉差异，矩形内的点击仍然算作是在圆本身上。

#circle {
    -moz-border-radius: 50%;
    border-radius: 50%;
}

你可以输入一些代码来检查点击是否在圆圈内来解决这个问题。

【讨论】：

圆角足够大的矩形怎么样？
@6bytes：在 HTML 中获得圆角的唯一方法是使用 border-radius CSS 属性，IE9 将支持这一点，但较低版本不支持。 Chrome 和 FireFox 支持它（旧版 FireFox 支持 -moz-border-radius，而后者两者都支持）。但是对点击事件没有帮助，看这个demo：jsfiddle.net/rL4BU/1
我想你误解了我的意思。我单击某处（我不在乎什么和在哪里），显示圆形图像的动画应该出现在页面上。我编辑了问题以使我的问题更清楚。动画是问题，不是按钮。
@6bytes: 这个怎么样，这是使用圆角矩形而不是背景图，但是动画上的原理是一样的：jsfiddle.net/rL4BU/5

【解决方案2】：

也许您可以创建一个大的白色（或背景色）PNG，中间有一个 Alpha 透明度孔。将其放在要显示的图像顶部，然后将其放大，同时将其固定在中心点。将其缩放到整个底层图像都在透明孔内的点后，移除覆盖图像。

我不知道这会如何执行（可能很糟糕！），但这是一个想法。

【讨论】：