javascript - Fabric.js 图像上的圆形边界框

Question

我需要实现在 Canvas 上绘制圆形图像的功能。我正在使用 Fabric.js，但我找不到任何解决方案。实际上，当图像绘制为圆形时，它不应该超出图像的范围，并且可以选择将图像定位在圆形中。

Answer 1

您可以将 ClipTo 属性应用于您的图像。然后，ClipTo 将定义您要围绕图像剪切的圆圈大小。

以下是来自 Fabric.js 站点的示例: http://fabricjs.com/clipping/

clipTo: function (ctx) {
  ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}

但是，该示例是直接剪切，并且不包括在圆内移动图像的功能，因为圆和剪切区域本质上是一个对象。

我已经做了一些工作来创建一个能够使用 FabricJS 在其中移动图像的剪切区域。这是我如何对矩形实现此功能的示例。您必须更深入地探索它，因为我还没有完全清除该示例。 http://jsfiddle.net/PromInc/ZxYCP/