Question

我想制作动态裁剪区域并找到this代码段。它在正常使用情况下工作得很好，但是当您在制作裁剪区域之前缩放原始对象时，裁剪区域似乎不在正确的位置。您可以查看这个pen以寻求帮助吗？

var canvas = new fabric.CanvasEx('canvas');
var el;
var object, lastActive, object1, object2;
var cntObj = 0;
var selection_object_left = 0;
var selection_object_top = 0;

var src = "http://fabricjs.com/lib/pug.jpg";

fabric.Image.fromURL('https://omicron.aeon.co/images/08e7f2bb-f2ce-4058-a955-1c8d594468a2/card_SIZED-Aleksandr-Zykov-4975950437_b84f9f9ef8_o.jpg', function (oImg) {
    oImg.top = canvas.getHeight()/2 - oImg.getHeight()/2;
    oImg.left = canvas.getWidth()/2 - oImg.getWidth()/2;
    canvas.add(oImg);
    bindCropEvent(oImg);
  });
canvas.renderAll();

function bindCropEvent(obj){
  obj.on('object:dblclick', function(){
    CropMode();
  }); 
};

function CropMode() {
    canvas.remove(el);
    if (canvas.getActiveObject()) {
        object = canvas.getActiveObject();
        if (lastActive !== object) {
            console.log('different object');
        } else {
            console.log('same object');
        }
        if (lastActive && lastActive !== object) {
            //lastActive.clipTo = null; results in clip loss
        }
        el = new fabric.Rect({
            fill: 'rgba(0,0,0,0.6)',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            strokeDashArray: [2, 2],
            opacity: 1,
            width: 1,
            height: 1,
            borderColor: 'red',
            cornerColor: 'red',
            hasRotatingPoint: false
        });

        el.left = canvas.getActiveObject().left;

        selection_object_left = canvas.getActiveObject().left;
        selection_object_top = canvas.getActiveObject().top;

        el.top = canvas.getActiveObject().top;

        el.width = canvas.getActiveObject().width * canvas.getActiveObject().scaleX;
        el.height = canvas.getActiveObject().height * canvas.getActiveObject().scaleY;

        //插入
        canvas.add(el);
        canvas.setActiveObject(el);
        el.on('deselected', function(){
          console.log('des');
          doCrop();
        });

    } else {
        alert("Please select an object or layer");
    }
}

function doCrop() {

    var eLeft = el.get('left');
    var eTop = el.get('top');
    var left = eLeft - object.left;
    var top = eTop - object.top;
    console.log(left, top);

    left *= 1;
    top *= 1;
    console.log(left, top);

    var eWidth = el.get('width');
    var eHeight = el.get('height');

    var eScaleX = el.get('scaleX');
    var eScaleY = el.get('scaleY');

    var width = eWidth * 1;
    var height = eHeight * 1;

    object.clipTo = function (ctx) {
        ctx.rect(-(eWidth / 2) + left, -(eHeight / 2) + top, parseInt(width * eScaleX), parseInt( height * eScaleY));
    }

    canvas.remove(el);
    lastActive = object;
    canvas.renderAll();
}

谢谢！

Answer 1

创建矩形时，可以使用toDataURL（）创建新图像。什么是裁剪图像。

 cropOptions = {
              left: Math.floor(rect.left),
              top: Math.floor(rect.top),
              width: Math.floor(rect.width),
              height: Math.floor(rect.height)
           },
      cropDataUrl ;

                 cropDataUrl = image.toDataURL(cropOptions); 

           new fabric.Image.fromURL(cropDataUrl, function(img) {
               canvas.remove(image,rect).add(img); //this is your cropped image
             })

Fabric.js - 带有矩形的动态裁剪区域

1 个答案: