Fabricjs 中可见溢出的图像裁剪

Question

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

有一个 old clipping examples 我讲过。它还使用 lodash 将剪辑名称绑定到对象：

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

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

Answer 1

我找到了不清楚的解决方案。再次。 canvas 的背景颜色可能会产生不透明度，并且背景图像可能会被裁剪对象（w/o 裁剪本身）。此外，加载的图像应定义 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 中可见溢出的图像裁剪

Image clipping with visible overflow in Fabricjs

fabricjs