Загрузить SVG как clipPath с рамкой - fabricjs - PullRequest
0 голосов
/ 20 февраля 2019

Мне нужно разграничить холст с помощью SVG.Раньше у меня это было с clipTo, и оно работало нормально, но мы обновили версию 2.3.4 из Fabric.js, и clipTo больше не работает, и рекомендуем ClipPath.Делая это с ClipPath, он делает это правильно, но граница не рисует его.Нам нужно разделить края, чтобы выделить редактируемую зону.

Мой результат с версией ткани 1.6:

enter image description here

Мой результат с тканьюверсия 2.3.4 и clipPath:

enter image description here

Как видите, он не рисует границы границ, хотя и делает.

Как я могу выполнить эту функцию с новой версией Fabric?

У меня есть JSFiddle с кругом clipPath для тестирования, без добавления границы.

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());
...