如何在fabric.js中将蒙版设为蒙版图像的100％宽度？

Question

我正在尝试在fabric.js中使用Mask过滤器。 这是我得到的结果： 错误渲染的蒙版

第一件事是蒙版被像素化并且没有正确渲染（透明线）。 第二件事：如何使被遮罩的图像始终保持其宽度的100％，以调整遮罩图像的大小？

这是我的代码：

var canvas = new fabric.Canvas(canvasElement.get(0), {
    clipTo: function (ctx) {
        ctx.rect(relPos.x, relPos.y, dimensions.x, dimensions.y);
    },
    controlsAboveOverlay: true
});

fabric.Image.fromURL(el.options.source, function (img) {
    img.set({
        angle: el.options.degree
    });

    img.set({
        left: el.options.x,
        top: el.options.y,
        width: el.options.width,
        height: el.options.height
    });

    fabric.Image.fromURL('http://localhost/mask.jpg', function (maskImg) {
        var mask = new fabric.Image.filters.Mask({mask: maskImg});
        img.filters.push(mask);
        img.applyFilters( function() {
            canvas.add(img);
            canvas.renderAll();
        });
    });
}); 

我已将其添加到代码笔中： https : //codepen.io/anon/pen/VWrbyx 。

Answer 1

好的，在我的环境中的最新版本的Fabric上似乎工作正常。 遮罩是那里图像的100％。 尽管我为什么在我的环境的旧版本（1.4.6）上而不是Codepen的干净测试版本上有这些蒙版渲染问题，这真的很奇怪。 如果有人有想法，请发表评论。

Answer 2

有一个可以解决的类似的讨论在这里 。 解决方法似乎是先在与遮罩图像相同大小的另一个画布上绘制遮罩。