在fabric.js中使用组作为掩码

时间:2015-03-27 06:08:02

标签: javascript fabricjs

我想创建一个300px宽和200px高的组,然后在该组内加载一些东西。当我加载大于组尺寸的图像时,它会在组外出血。我喜欢" crop"图像(类似于CSS溢出:隐藏属性)。

这可能吗?

1 个答案:

答案 0 :(得分:0)

要完成您的任务,您应该使用图片上的clipTo功能,群组上的clipTo功能已经有open bug,顺便说一句,您可以在那里工作,通过转置维度和你的组到clipTo函数的位置:

  

clipTo:Function§确定对象剪切的函数   (上下文作为第一个参数传递)请注意,上下文源位于   对象的中心点(不是左/上角)

查看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>