Question

是否可以使用fabric js屏蔽两个图像？

例如：我有一个彩色的形状（心脏）。我有另外的图像，我想掩盖它的心脏，使新图像只显示为心脏。我可以移动第二个上传的图像并调整大小以获得所需的区域。

这两个图像都是用户上传的图像，而不是使用结构创建的那些矩形或正方形之一，并且像这里的jsfiddle示例一样拖动和调整图像大小。

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

var clippingRect = new fabric.Rect({
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    fill: 'transparent',
    opacity: 1
});
canvas.add(clippingRect);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {

            var instanceWidth, instanceHeight;

            instanceWidth = img.width;
            instanceHeight = img.height;

            var imgInstance = new fabric.Image(img, {
                width: instanceWidth,
                height: instanceHeight,
                top: (canvas.getHeight() / 2 - instanceHeight / 2),
                left: (canvas.getWidth() / 2 - instanceWidth / 2),
                originX: 'left',
                originY: 'top'
            });
            canvas.add(imgInstance);
            imgInstance.clipTo = function (ctx) {
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.rect(
    100, 100,
    200, 200
  );
  ctx.restore();
            };
            canvas.renderAll();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}

我需要这个，但有两个自定义图像（用户上传的图像）。

Answer 1

也许这个伪示例将为您提供如何使用路径添加蒙版的指针，而不仅仅是矩形。

<preference name="stay-in-webview" value="true" />

完整演示（虽然略有另一种情况）：http://jsfiddle.net/mqL55m0f/2/

使用fabric js掩盖两个图像

1 个答案: