首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在fabricjs中缩放图像后,无法保留圆的位置

在fabricjs中缩放图像后,无法保留圆的位置
EN

Stack Overflow用户
提问于 2015-11-18 22:14:26
回答 1查看 586关注 0票数 1

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

问题:我可以缩放,这对图像非常有效,但是圆的位置会发生变化,例如,如果我在图像上拖动圆(例如,熊猫的眼睛)并进行放大/缩小,圆的位置会从眼睛移动到其他地方。

代码如下:

HTML:

代码语言:javascript
运行
复制
<h1>After Zooming the shapes positions are changing<h1>
<canvas id="canvas" height=700 width=700></canvas>

JavaScript:

代码语言: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

EN

回答 1

Stack Overflow用户

发布于 2015-11-19 21:54:02

当您尝试为对象赋予新的维度时,主要问题出现在for循环上。

我更改了for循环,它很好

代码语言:javascript
运行
复制
 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

希望能帮上忙,祝你好运。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33782350

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档