Как получить правильные координаты эллипса в соответствии с изображением, нарисованным в Fabric.js

Question

Я пытаюсь использовать Fabricjs для рисования эллипса над изображением, где пользователь также может увеличивать / уменьшать масштаб и рисовать, что в дальнейшем сохраняется на сервере для просмотра в приложениях Android.

Но я не могу получить правильные координаты для сохранения на сервере.

Предположим, пользователь в некоторой степени увеличил масштаб, скажем, scaleX @1.5, нарисовал эллипс поверх изображения и затем попытался сохранить.

Как я могу получить соответствующие левый и верхний части эллипса в соответствии с image @ scaleX, равным 1,0, потому что Android следует их соотношению сторон и всегда учитывает 1,0 как хорошее значение масштаба, а координаты, связанные с масштабом 1,0, легко рисуются на Android, тогда как scaleX@1.5 полностью мешает расположению эллипса.

Вот Fiddle, вы можете увеличивать / уменьшать масштаб, чтобы увидеть журналы (координаты) в виде 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 вы можете увеличивать изображение по желанию и не беспокоиться об изменении координат объектов и коэффициента масштабирования.