我正在尝试使用Fabricjs在图像上绘制椭圆形,用户还可以放大/缩小并绘制图像,然后将其进一步保存到服务器以在Android应用程序中看到。
但是我无法获取适当的坐标以保存到服务器。
假设用户放大到一定程度,例如scaleX @ 1.5并在图像上绘制一个椭圆,然后尝试保存。
我如何根据1.0的图像@ scaleX获取椭圆的左上角和上角,因为Android遵循其长宽比并始终将1.0视为一个良好的比例值,并且在Android上很容易绘制与比例1.0相关的坐标,而scaleX@1.5完全干扰了椭圆的位置。
这是Fiddle,您可以放大/缩小以在画布下以HTML内容查看日志(坐标)。
您可以使用鼠标自由绘制椭圆(缩放以查看日志更改)。
代码: //Please check Fiddle
最佳答案
http://jsfiddle.net/h2zvj3un/28/
不要尝试编写自己的缩放功能,因为您正在使用的库已经具有一个,并且可以使用法线坐标而无需使用任何缩放因子。
function _zoom(e, dragDelta) {
var evt=window.event || e;
var delta = (dragDelta == undefined) ? evt.detail? evt.detail*(-120) : evt.wheelDelta : dragDelta;
var curZoom = canvas.getZoom(), newZoom = curZoom - delta / 400,
x = e.offsetX, y = e.offsetY;
var objects = canvas.getObjects();
//applying zoom values.
canvas.zoomToPoint({ x: x, y: y }, newZoom);
var ellipse = objects[1];
var image = objects[0];
var ix = image.left;
var iy = image.top;
var ex = ellipse.left;
var ey = ellipse.top;
document.getElementById("logs").innerHTML = "Circle Left : " + ex + "<br/>" + "Circle Top : " + ey + "<br/>Image Left : " + ix + "<br/>" + "Image Top : " + iy + "<br/> Image ScaleX : " + image.scaleX + "<br/>Circle ScaleX" + ellipse.scaleX + "<br/> Expected data coordinates to be sent to server is (last left - new left/new scale, last top - last top/new scale) -> (" + (ex - ix) + ", " + (ey - iy) + ")";
canvas.renderAll();
e.preventDefault();
return false;
}
使用canvas.zoomToPoint可以随意缩放,而不必担心更改对象的坐标和比例因子。
关于javascript - 如何根据Fabric.js中绘制的图像获取椭圆的正确坐标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34545746/