如何根据Fabric.js中绘制的图像得到合适的椭圆坐标

Question

我正在尝试使用 Fabricjs 在图像上绘制椭圆，用户还可以在其中缩放 in/out 并绘制进一步保存到服务器以在 Android 应用程序中查看的图像。

但是我无法获取正确的坐标以保存到服务器。

假设用户放大到某种程度，比如 scaleX @1.5 并在图像上绘制一个椭圆然后尝试保存。

如何根据 1.0 的图像@scaleX 得到相应的椭圆左侧和顶部，因为 Android 遵循它们的纵横比并且始终将 1.0 作为一个好的比例值和与比例相关的坐标1.0 的值很容易在 Android 上绘制，而 scaleX@1.5 则完全扰乱了椭圆位置。

这里是Fiddle，你可以放大in/out来查看canvas下的HTML内容的日志（坐标）。您可以使用鼠标自由绘制椭圆（缩放以查看日志变化）。

代码： //Please check Fiddle

Answer 1

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可以随意缩放，不用担心改变物体的坐标和比例因子。

如何根据Fabric.js中绘制的图像得到合适的椭圆坐标

How to get proper coordinates of a ellipse according to the image drawn in Fabric.js

javascript

canvas

html5-canvas

fabricjs