Fabric JS 2.4.1 ClipPath Crop не работает с динамически создаваемой прямоугольной маской

Question

Я делаю редактор с использованием Fabric JS 2.4.1 и выполнил все функции, кроме динамической обрезки изображения.Функциональность включает в себя создание прямоугольника с помощью мыши над изображением и нажатие кнопки обрезки.

Я успешно выполнил проверку концепции с помощью прямоугольника, который был создан статически, но не могу отобразить его в моей динамике.код.Я не думаю, что проблема связана с динамически создаваемым прямоугольником, но я не могу изолировать проблему.Это должно быть что-то простое, что я упускаю из виду, и я думаю, что проблема может быть в моем коде кнопки обрезки.

    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);
        }
    });

Вот скрипка к динамическому коду, который имеет проблему: https://jsfiddle.net/Larry_Robertson/mqrv5fnt/

Вот скрипка статического кода, от которого я получил подтверждение концепции: https://jsfiddle.net/Larry_Robertson/f34q67op/

Исходный код динамической версии:

HTML

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

JS

    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;
    });

Answer 1

Вам нужно установить для параметра грязного на изображении значение true, чтобы кэш объекта перерисовывался при следующем вызове рендеринга.Вот скрипка: https://jsfiddle.net/mqrv5fnt/115/

 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;
});