图像上方的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/