Question

我正在尝试在fabric.js中使用Mask过滤器。这是我得到的结果： Incorrectly rendered masks

首先，遮罩是像素化的，没有正确渲染（透明线条）。第二件事：我怎样才能使蒙版图像调整大小，使图像被遮盖的宽度始终为其宽度的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

对解决方案here进行了类似的讨论。解决方案似乎是首先在与掩模图像大小相同的另一个画布上绘制遮罩。

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

2 个答案: