2

我需要用 SVG 分隔画布。在我使用 clipTo 之前它运行良好，但我们已将版本更新到 Fabric.js 的 2.3.4 和 clipTo 不再工作，并推荐 ClipPath。使用 ClipPath 执行此操作时，它会正确执行，但边框不会绘制它。我们需要划定边缘以突出显示可编辑区域。

我使用 Fabric 1.6 版的结果：

在此处输入图像描述

我的 Fabric 版本 2.3.4 和 clipPath 的结果：

在此处输入图像描述

如您所见，它不会绘制边界的边缘，尽管它确实如此。

如何使用新版本的 Fabric 执行此功能？

我有一个带有一圈clipPath的JSFiddle 来测试，而无需添加边框。

var canvas = new fabric.Canvas('c');

(function() {
    var clipPath = new fabric.Circle({
        radius: 100,
        top: -200,
        left: -200
    });
    var clipPath2 = new fabric.Circle({
        radius: 100,
        top: 0,
        left: 0
    });
    var clipPath3 = new fabric.Circle({
        radius: 100,
        top: 0,
        left: -200
    });
    var clipPath4 = new fabric.Circle({
        radius: 200,
        top: 15,
        left: 30,
        strokeWidth: 5,
        stroke: "red",
        fill: "#3ff4ff",
        hoverCursor: "pointer",
        opacity: 1,
        selectable: false,
        absolutePositioned: true,
        controlsAboveOverlay: true,
        hasBorders: true,
        borderDashArray: [3, 3],
        borderColor: 'red',
        strokeLineJoin: 'mitter',
        strokeMiterLimit: 3000,
        objectCaching: true,
        affectStroke: true
    });
    canvas.clipPath = clipPath4;
    //canvas.add(clipPath4);
    //var g = new fabric.Group([clipPath, clipPath2, clipPath3]);
    //g.inverted = true;
    fabric.Image.fromURL('http://fabricjs.com/assets/dragon.jpg', function(img) {
        //img.clipPath = g;
        img.scaleToWidth(125);
        img.left = 175;
        img.top = 175;
        canvas.add(img);
    });
    a tag

    canvas.setBackgroundColor("#00CCEE");
    console.log(canvas.ga tagetObjects());
})()
console.log(canvas.getObjects());
4

0 回答 0