Javascript fabric.js对象内部的裁剪路径

你好。我在上图中有一个例子，我正在尝试使用fabric.js对其进行重新调整。问题是我不能在里面裁剪矩形。谷歌搜索对我没有帮助。我对我的尝试不感兴趣

var cropCanvas = new fabric.Canvas('crop', {
  backgroundColor: '#000',
});

fabric.Image.fromURL('https://dl.dropboxusercontent.com/u/17055521/face2.jpg', function(pic){

  var rect = new fabric.Rect({
    left: 0,
    top: 0,
    fill: '#000',
    opacity: 0.79,
    width: cropCanvas.width,
    height: cropCanvas.height,
    selectable: false,
    evented : false
  });

  pic.set({
    selectable: false,
    evented : false
  });

  cropCanvas.add(pic);
  cropCanvas.add(rect);
  pic.centerH().setCoords();

  var path = new fabric.Path('M1.398,84.129c3.305,20.461,9.73,50.635,13.591,67.385c2.354,10.212,12.549,23.734,18.51,30.02c4.923,5.191,27.513,23.343,38.34,27.589c18.604,7.295,33.984,4.187,46.012-8.306c12.028-12.493,25.595-34.78,27.954-43.994c2.587-10.105,5.065-26.842,4.313-37.243c-1.036-14.316-14.224-69.332-16.806-79.55c-4.48-17.735-26.246-48.821-80.609-37.668C-1.66,13.514-1.879,63.844,1.398,84.129z');

  path.set({
    originX: 'center',
    originY: 'center',
  });

  rect.set({
    clipTo: function(ctx) {
      path.render(ctx);
    }
  });

  cropCanvas.renderAll();
});

---

您能帮助我吗？

您应该将

cropTo

应用于

pic

对象，而不是代码中的

rect

。像这样：

pic.set({
    clipTo: function(ctx) {
      path.render(ctx);
    }
  }); 

检查更新的小提琴：

UPD

为了获得完全相同的效果，您可以添加相同的图像两次，不透明度为0.5。 在此处检查新小提琴：

---

现在图片隐藏在路径之外。这不是我需要的。

//1 - adding bg image
fabric.Image.fromURL(imgURL, function(picBg) {
  picBg.set({
    selectable: false,
    evented: false,
    opacity: 0.6
  });
  cropCanvas.add(picBg);
  picBg.centerH().setCoords();


  //2 - adding main image and mask

  /* here goes all other code */

});