javascript - 在fabricjs中缩放图像后无法保留圆圈的位置

Question

我正在尝试使用 Fabricjs 库在图像上绘制图像和圆圈。我正在执行以下步骤:1)在 Canvas 上绘制图像。2)在 Canvas 上画圆。3) 使用鼠标滚动来放大/缩小图像。

问题:我能够缩放并且这对于图像来说非常适合，但是圆圈的位置发生了变化，例如，如果我通过在图像上拖动圆圈(例如 Pandas 的眼睛)来保留圆圈并放大/缩小，则圆圈的位置得到从眼睛转移到其他地方。

代码如下:

HTML:

<h1>After Zooming the shapes positions are changing<h1>
<canvas id="canvas" height=700 width=700></canvas>

JavaScript:

var canvas = new fabric.Canvas("canvas");
    fabric.Image.fromURL('http://www.nairaland.com/attachments/1539614_pow_jpegfbbdd74848f20f626bb76cedb0cdded3', function(oImg) {
        oImg.scale(1.0).set({
        left: 1,
        top: 1,
        selectable : false
    });

    canvas.add(oImg).setActiveObject(oImg);
    var circle = new fabric.Circle({
        left: 100,
        top: 80,
        originX: 'left',
        originY: 'top',
        radius: 45,
        angle: 0,
        fill: '',
        stroke:'red',
        strokeWidth:3
    });

    canvas.add(circle);
    canvas.renderAll();

    _applyZoom();

});

var _applyZoom = function () {
    canvas.on("mouse:move", function(event) {
    currentMouseY = Math.round(event.e.clientY );
});

canvas.getObjects()[0].on("mousemove", function(event) {
    currentMouseX = Math.round(event.e.clientX );
});

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (document.attachEvent) 
  document.attachEvent("on"+mousewheelevt, _zoom) 
else if (document.addEventListener) 
  document.addEventListener(mousewheelevt, _zoom, false)
return this;

}

function _zoom(e, dragDelta) {  
    var evt=window.event || e;
    var delta = (dragDelta == undefined) ? evt.detail? evt.detail*(-120) : evt.wheelDelta : dragDelta;
    var factor = 0.9;
    if (delta > 0) {
        factor = 1/factor;
    }
    var objects = canvas.getObjects();
    var image = objects[0];
    var imageX = (currentMouseX - image.getLeft()),
        imageY = (currentMouseY - image.getTop());
    var dx = imageX * (factor - 1),
        dy = imageY * (factor - 1);

    //applying zoom values.
    for (var i in objects) {
        objects[i].left = objects[i].left - dx;
        objects[i].top = objects[i].top - dy;
        objects[i].scaleX = objects[i].scaleX * factor;
        objects[i].scaleY = objects[i].scaleY * factor;
        objects[i].setCoords();
    }

    canvas.renderAll();
    e.preventDefault();
    return false;

} 

Fiddle for the work !

Answer 1

当您尝试为对象赋予新尺寸时，主要问题出在 for 循环上。

我改变了for循环，它很好

 for (var i in objects) {
       var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * factor;
            var tempScaleY = scaleY * factor;
            var tempLeft = left * factor;
            var tempTop = top * factor;

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
    }

fiddle live

希望有帮助，祝你好运。