Question

你好我有一个fabricJs画布，我加载一个图像。之后我在上面绘制矩形（感兴趣的区域）

我想要的是，当我拖动图像在其上移动时（例如缩放后），所有矩形随之移动。

这是我的实际代码。

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL("/images/test.png", (oImg) => {
                canvas.add(oImg);
                canvas.sendToBack(oImg);
                canvas.renderAll();
            }, {evented: false, selectable: false, hasBorders: false, hasControls: false, hasRotatingPoint: false});
var text = new fabric.Textbox('1. Text inside canvas', { 
  left: 100, 
  top: 50,
  width:300,
  fill: 'white'
});

canvas.add(text);

$("#zoomIn").click(function(){
    zoomIn();
});

$("#zoomOut").click(function(){
    zoomOut();
});

$("#btnResetZoom").click(function(){
    resetZoom();
});

function zoomIn() {
    canvas.setZoom(canvas.getZoom() *1.1);
    canvas.renderAll();
}
function zoomOut() {
    canvas.setZoom(canvas.getZoom() * 0.9);
    canvas.renderAll();        
}
function resetZoom() {
    canvas.setZoom(1);
    canvas.renderAll();


}


 var DrawingRectangle;

            var rectangle, isDown, origX, origY;
   $("#select").click(function(){
    canvas.isDrawingMode = false;
      canvas.forEachObject(function(object){ 
    object.selectable = true; 
       object.evented =true;
})

    });
    $("#draw").click(function(){
        DrawingRectangle = true;
        canvas.forEachObject(function(object){ 
        object.selectable = false; 
        object.evented =false;
})
        draw();

    });
    $("#delete").click(function(){
        canvas.isDrawingMode = false;

    });
    function draw(){        
            canvas.on('mouse:down', function(o){
                var pointer = canvas.getPointer(o.e);
                isDown = true;
                origX = pointer.x;
                origY = pointer.y;

                rectangle = new fabric.Rect({
                    left: origX,
                    top: origY,
                    fill: 'transparent',
                    stroke: 'red',
                    strokeWidth: 3,
                    selectable: true,
                });
                rectangle.hasRotatingPoint=true;
                canvas.add(rectangle);
            });

            canvas.on('mouse:move', function(o){
                if (!isDown) return;
                var pointer = canvas.getPointer(o.e);
                if(origX>pointer.x){
                    rectangle.set({ left: Math.abs(pointer.x) });
                }
                if(origY>pointer.y){
                    rectangle.set({ top: Math.abs(pointer.y) });
                }

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

            canvas.on('mouse:up', function(o){
                isDown = false;
                canvas.off('mouse:down');
                canvas.off('mouse:move');
                canvas.off('mouse:up');

            });
    }

我实际上做的是当我点击“绘图”按钮时，我的所有对象都变得无法选择，因此我可以在图像上绘制。然后，当我点击“选择”按钮时，我的所有对象都变得可选（仅适用于我的图像，但不适用于我绘制的矩形）一旦我移动我的图像，图像就会出现在前景中，而我的矩形会在背景中消失。

1）为什么我的矩形无法选择
2）当图像对象（我猜是ID 0，因为它是第一个加载的对象）被移动时，如何移动所有对象。

编辑：解决了No1。仍有2号问题。我尝试使用我的图像对象触发事件但不起作用。像这样：
  oImg.on('mouse:down', function(o){ it says it's undefined

Answer 1

＆＃13;

var canvas = new fabric.Canvas('paper',{preserveObjectStacking:true});
canvas.backgroundColor = 'grey';
var isDown = false;
fabric.Image.fromURL("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66", function (oImg) {
    canvas.add(oImg);
    canvas.sendToBack(oImg);
    oImg.on('mousedown', function() {
        oImg.centerPt = this.getCenterPoint();
        canvas.forEachObject(function(obj) {
            obj.origPose = new fabric.Point(obj.left, obj.top);
        })
    })
    oImg.on('mouseup', function() {
        delete this.centerPt;
        canvas.forEachObject(function(obj) {
            delete obj.origPose;
        })
    })
    oImg.on('moving', function(evt) {
        var self = this;
        var diff = this.getCenterPoint().subtract(self.centerPt);
        canvas.forEachObject(function(obj) {
            if (obj == self) return;
            obj.set({
                left: obj.origPose.x + diff.x,
                top: obj.origPose.y + diff.y
            })
            obj.setCoords();
        })
    })
    canvas.renderAll();
}, {
    selectable: false,
});
var text = new fabric.Textbox('1. Text inside canvas', {
    left: 100,
    top: 50,
    width: 300,
    fill: 'white',
    selectable: false
});

canvas.add(text);
$("#zoomIn").click(function() {
    zoomIn();
});

$("#zoomOut").click(function() {
    zoomOut();
});

$("#btnResetZoom").click(function() {
    resetZoom();
});

function zoomIn() {
    canvas.setZoom(canvas.getZoom() * 1.1);
    canvas.renderAll();
}

function zoomOut() {
    canvas.setZoom(canvas.getZoom() * 0.9);
    canvas.renderAll();
}

function resetZoom() {
    canvas.setZoom(1);
    canvas.renderAll();
}
$("#select").click(function() {
    DrawingRectangle = false;
    canvas.selection = true;
    canvas.off('mouse:down');
    canvas.off('mouse:move');
    canvas.off('mouse:up');
    changeSelectableStatus(true);
});

$("#draw").click(function() {
    canvas.selection = false;
    draw();
    changeSelectableStatus(false);
});

function changeSelectableStatus(val) {
    canvas.forEachObject(function(obj) {
        obj.selectable = val;
    })
    canvas.renderAll();
}

function draw() {
    canvas.on('mouse:down', onMouseDown);
    canvas.on('mouse:move', onMouseMove);
    canvas.on('mouse:up', onMouseUp);
}

function onMouseDown(o) {
    var pointer = canvas.getPointer(o.e);
    isDown = true;
    origX = pointer.x;
    origY = pointer.y;

    rectangle = new fabric.Rect({
        left: origX,
        top: origY,
        fill: 'transparent',
        stroke: 'red',
        strokeWidth: 3,
        selectable: false
    });
    canvas.add(rectangle);
}

function onMouseMove(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    if (origX > pointer.x) {
        rectangle.set({
            left: Math.abs(pointer.x)
        });
    }
    if (origY > pointer.y) {
        rectangle.set({
            top: Math.abs(pointer.y)
        });
    }

    rectangle.set({
        width: Math.abs(origX - pointer.x)
    });
    rectangle.set({
        height: Math.abs(origY - pointer.y)
    });
    canvas.renderAll();
};

function onMouseUp(o) {
    rectangle.setCoords();
    isDown = false;
    DrawingRectangle = false;
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="800" height="300" style="border:1px solid #ccc;"></canvas>
<button  id="draw">Draw ROI</button>
<button  id="select">Select ROI(s)</button>
<button  id="zoomIn">Zoom In</button>
<button  id="zoomOut">Zoom Out</button>
<button  id="btnResetZoom">Reset Zoom</button>

＆＃13;

1）绘制ROI按钮＆gt;绘制矩形，绘制矩形。

2）选择ROI按钮＆gt;选择对象（移动，旋转）。

3）放大/缩小按钮。

4）并且在画布上有一个图像，如果你将那个图像拖到那里，那么它们会拖动那个距离很远的图像。

使用preserveObjectStacking:true然后在拖动时对象不会出现在顶部。

FabricJs canvas Dragging第一个加载的对象将拖动所有对象

1 个答案: