Мне нужно разграничить холст с помощью SVG.Раньше у меня это было с clipTo, и оно работало нормально, но мы обновили версию 2.3.4 из Fabric.js, и clipTo больше не работает, и рекомендуем ClipPath.Делая это с ClipPath, он делает это правильно, но граница не рисует его.Нам нужно разделить края, чтобы выделить редактируемую зону.
Мой результат с версией ткани 1.6:
Мой результат с тканьюверсия 2.3.4 и clipPath:
Как видите, он не рисует границы границ, хотя и делает.
Как я могу выполнить эту функцию с новой версией 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());