在 fabric.js 中使用组作为遮罩

Question

我想创建一个宽 300 像素、高 200 像素的组，然后在该组中加载一些内容。当我加载大于组尺寸的图像时，它会在组外流血。我想要 "crop" 图片（类似于 CSS overflow:hidden 属性）。

这可能吗？

Answer 1

要完成您的任务，您应该使用 clipTo function on your image, the clipTo function on a group already has an open bug，顺便说一下，您可以在那里解决问题，方法是将组的尺寸和位置转置到 clipTo 函数：

clipTo :Function § Function that determines clipping of an object (context is passed as a first argument) Note that context origin is at the object's center point (not left/top corner)

看看 official demo，然后在对图像进行剪辑操作后，您可以将其添加到组中（运行下面的脚本查看示例）。

var canvas = window.__canvas = new fabric.Canvas('c');
var path = 'http://fabricjs.com/lib/pug.jpg';

var _img = new Image();
_img.onload = function(img) {
  var dog = new fabric.Image(_img, {

    left: 100,
    top: 100,
    width: 300,
    height: 300,
    selectable: false,
    clipName: 'dog',
    clipTo: function(ctx) {
      
      ctx.rect(0, 0, 50, 50);
    }
  });

  var group = new fabric.Group([dog], {
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    borderColor: 'black',
  });

  canvas.add(group);
};
_img.src = path;


canvas.renderAll();

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c" height="300" width="300" style="border:1px dashed #333;"></canvas>

在 fabric.js 中使用组作为遮罩

Use a group as a mask in fabric.js

javascript

fabricjs