我正在尝试使用Fabricjs库在图像上绘制一个图像和一个圆圈。我正在遵循以下步骤: 1)在画布上绘制图像。2)在画布上画圆。3)使用鼠标滚动来放大/缩小图像。
问题:我可以缩放,这对图像非常有效,但是圆的位置会发生变化,例如,如果我在图像上拖动圆(例如,熊猫的眼睛)并进行放大/缩小,圆的位置会从眼睛移动到其他地方。
代码如下:
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!
发布于 2015-11-19 21:54:02
当您尝试为对象赋予新的维度时,主要问题出现在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
希望能帮上忙,祝你好运。
https://stackoverflow.com/questions/33782350
复制相似问题