Question

我想要剪辑图像，但是默认剪切行为只是隐藏了一个超出边界的图像部分。有没有办法让它可见并为溢出的内容设置较少的不透明度？

我告诉过old clipping examples之一。它还使用lodash将剪辑名称绑定到object：

return _.bind(clipByName, pug)(ctx)

有没有办法用vanilla es5替换这个功能？

Answer 1

我发现解决方案不清楚。再次。画布的背景颜色可以使不透明度和背景图像可以是剪切对象（没有剪裁本身）。此外，加载的图像应将globalCompositeOperation定义为source-atop。

var canvas = new fabric.Canvas('c');
var clipingRect = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    top: 50,
    left: 50,
    height: 300,
    width: 300,
    fill: 'white',
    selectable: false
});
canvas.backgroundColor = 'rgba(255,255,0,0.5)';
canvas.setBackgroundImage(clipingRect);
fabric.Image.fromURL('http://placeimg.com/640/480/any', function(fimg) {
    canvas.add(fimg.set({
        left: 0,
        top: 0,
        width: canvas.getWidth(),
        height: canvas.getHeight(),
        globalCompositeOperation: 'source-atop'
    }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

图像剪辑与Fabricjs中的可见溢出

1 个答案: