Dynamic Fabric JS 2.4.1 ClipPath裁剪不使用动态创建的矩形遮罩

我正在使用fabric js 2.4.1制作一个编辑器，并且已经完成了除动态图像裁剪之外的所有功能。该功能包括用鼠标在图像上创建一个矩形，然后单击裁剪按钮

我已经成功地用一个静态创建的矩形进行了概念验证，但无法在动态代码中进行渲染。我不认为这个问题与动态创建的rect有关，但我似乎无法隔离这个问题。它必须是我忽略的简单的东西，我认为问题可能在我的裁剪按钮代码中

    document.getElementById("crop").addEventListener("click", function() {
        if (target !== null && mask !== null) {
            mask.setCoords();
            target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
            //target.selectable = true;
            target.setCoords();
            console.log(target);
            canvas.renderAll();
            //canvas.remove(mask);
        }
    });

下面是有问题的动态代码：

以下是我从中获得概念证明的静态代码：

动态版本的源代码：

HTML

<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="crop">Crop</button>

---

您需要将image上的dirty参数设置为true，以便下次渲染调用时重新渲染对象的缓存。 这是小提琴：

---

非常感谢马吕斯！这对我很有用。我仍然有一些定位问题，但我很确定我能解决。这是我的小提琴，它也解决了定位问题。谢谢大家。我不确定这是否应该作为第二个问题提交，请有人告诉我是否应该，我将删除它。虽然修复效果很好，但我注意到最终剪裁的图像仍然保留了原始图像的高度和宽度。在不改变纵横比的情况下，是否仍有必要修剪剩余的空白或调整大小？这与基本问题无关。你需要查看官方文件。。你需要玩cropX，cropY，width和height。

    var canvas = new fabric.Canvas('c', {
        selection: true
    });

    var rect, isDown, origX, origY, done, object, mask, target;

    var src = "http://fabricjs.com/lib/pug.jpg";
    fabric.Image.fromURL(src, function(img) {
        img.selectable = false;
        img.id = 'image';
        object = img;
        canvas.add(img);
    });

    canvas.on('object:added', function(e) {
        target = null;
        mask = null;
        canvas.forEachObject(function(obj) {
            //alert(obj.get('id'));
            var id = obj.get('id');
            if (id === 'image') {
                target = obj;
            }
            if (id === 'mask') {
                //alert('mask');
                mask = obj;
            }
        });
    });

    document.getElementById("crop").addEventListener("click", function() {
        if (target !== null && mask !== null) {
            mask.setCoords();
            target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
            //target.selectable = true;
            target.setCoords();
            console.log(target);
            canvas.renderAll();
            //canvas.remove(mask);
        }
    });

    canvas.on('mouse:down', function(o) {
        if (done) {
            canvas.renderAll();
            return;
        }
        isDown = true;
        var pointer = canvas.getPointer(o.e);
        origX = pointer.x;
        origY = pointer.y;
        rect = new fabric.Rect({
            left: origX,
            top: origY,
            //originX: 'left',
            //originY: 'top',
            width: pointer.x - origX,
            height: pointer.y - origY,
            //angle: 0,
            fill: 'rgba(255,0,0,0.3)',
            transparentCorners: false,
            //selectable: true,
            id: 'mask'
        });
        canvas.add(rect);
        canvas.renderAll();
    });

    canvas.on('mouse:move', function(o) {
        if (done) {
            canvas.renderAll();
            return;
        }
        if (!isDown) return;
        var pointer = canvas.getPointer(o.e);

        if (origX > pointer.x) {
            rect.set({
                left: Math.abs(pointer.x)
            });
        }
        if (origY > pointer.y) {
            rect.set({
                top: Math.abs(pointer.y)
            });
        }

        rect.set({
            width: Math.abs(origX - pointer.x)
        });
        rect.set({
            height: Math.abs(origY - pointer.y)
        });


        canvas.renderAll();
    });

    canvas.on('mouse:up', function(o) {
        if (done) {
            canvas.renderAll();
            return;
        }
        isDown = false;

        //rect.selectable = true;
        rect.set({
            selectable: true
        });
        rect.setCoords();
        canvas.setActiveObject(rect);
        canvas.bringToFront(rect);
        canvas.renderAll();
        //alert(rect);
        rect.setCoords();
        object.clipPath = rect;
        object.selectable = true;
        object.setCoords();
        canvas.renderAll();
        //canvas.remove(rect);
        done = true;
    });

 var canvas = new fabric.Canvas('c', {
  selection: true
});

var rect, isDown, origX, origY, done, object, mask, target;

var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL(src, function(img) {
  img.selectable = false;
  img.id = 'image';
  object = img;
  canvas.add(img);
});

canvas.on('object:added', function(e) {
  target = null;
  mask = null;
  canvas.forEachObject(function(obj) {
    //alert(obj.get('id'));
    var id = obj.get('id');
    if (id === 'image') {
      target = obj;
    }
    if (id === 'mask') {
      //alert('mask');
      mask = obj;
    }
  });
});

document.getElementById("crop").addEventListener("click", function() {
  if (target !== null && mask !== null) {

    mask.setCoords();
    target.clipPath = mask; // THIS LINE IS NOT WORKING!!!
    target.dirty=true;
    //target.selectable = true;
    target.setCoords();
    canvas.remove(mask);
    canvas.renderAll();
    //canvas.remove(mask);
  }
});

canvas.on('mouse:down', function(o) {
  if (done) {
    canvas.renderAll();
    return;
  }
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  rect = new fabric.Rect({
    left: origX,
    top: origY,
    //originX: 'left',
    //originY: 'top',
    width: pointer.x - origX,
    height: pointer.y - origY,
    //angle: 0,
    fill: 'rgba(255,0,0,0.3)',
    transparentCorners: false,
    //selectable: true,
    id: 'mask'
  });
  canvas.add(rect);
  canvas.renderAll();
});

canvas.on('mouse:move', function(o) {
  if (done) {
    canvas.renderAll();
    return;
  }
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  if (origX > pointer.x) {
    rect.set({
      left: Math.abs(pointer.x)
    });
  }
  if (origY > pointer.y) {
    rect.set({
      top: Math.abs(pointer.y)
    });
  }

  rect.set({
    width: Math.abs(origX - pointer.x)
  });
  rect.set({
    height: Math.abs(origY - pointer.y)
  });


  canvas.renderAll();
});

canvas.on('mouse:up', function(o) {
  if (done) {
    canvas.renderAll();
    return;
  }
  isDown = false;

  //rect.selectable = true;
  rect.set({
    selectable: true
  });
  rect.setCoords();
  canvas.setActiveObject(rect);
  canvas.bringToFront(rect);
  canvas.renderAll();
  //alert(rect);
  rect.setCoords();
  object.clipPath = rect;
  object.selectable = true;
  object.setCoords();
  canvas.renderAll();
  //canvas.remove(rect);
  done = true;
});