如何在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

有一個可以解決的類似的討論在這里 。 解決方法似乎是先在與遮罩圖像相同大小的另一個畫布上繪制遮罩。