fabric.js Офсетное решение

Question

В борьбе со смещением с fabric.js - какой лучший подход?

Я в принципе позволяю пользователю нарисовать окно, и я хочу убедиться, что у меня есть поле, нарисованное с точными начальными и конечными координатами действия перетаскивания.

http://jsfiddle.net/mojo5000/P7gAC/4/

... 
    left: x + width/2 - 8, 
    top: y + height/2 - 8, 
... 

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

Answer 1

Вы не учитывали позиционирование элемента холста. Используйте следующее:

var canvas = new fabric.Canvas('c'); 

canvas.on("after:render", function(){canvas.calcOffset();}); 

var started = false; 
var x = 0; 
var y = 0; 
var width = 0; 
var height = 0; 

canvas.on('mouse:down', function(options) { 
    //console.log(options.e.clientX, options.e.clientY); 

    x = options.e.clientX; 
    y = options.e.clientY; 

    canvas.on('mouse:up', function(options) { 

    width = options.e.clientX - x; 
    height = options.e.clientY - y; 

    var square = new fabric.Rect({ 

     width: width, 
     height: height, 
     left: x + width/2 - canvas._offset.left, 
     top: y + height/2 - canvas._offset.top, 
     fill: 'red', 
     opacity: .2 
    }); 
    canvas.add(square); 
    canvas.off('mouse:up'); 
    $('#list').append('<p>Test</p>'); 

    }); 

}); 

Как вы можете видеть в коде, координаты элемента холста задаются: canvas._offset.left и canvas._offset.top