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

Question

我需要实现在画布上以圆圈绘制图像的功能。我正在使用 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/