fabric.js抵消解决方案 [英] fabric.js Offset Solution

问题描述

在用fabric.js处理偏移量时-最好的方法是什么?

In dealing with offset with fabric.js - what is the best approach?

我基本上是允许用户绘制一个框，并且我想确保已在拖动动作的确切开始和结束坐标处绘制了该框.

I'm basically allowing a user to draw a box, and I want to make sure I have the box drawn at the exact start and ending coordinates of the dragging action.

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

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

我基本上不得不对左值和顶值进行一些操作.看来行得通.有更好的方法吗?

I basically had to a little rigging with the left and top values. It seems to work. Is there a better way to do this?

推荐答案

您尚未考虑canvas元素的位置. 使用以下内容:

You have not factored in the positioning of the canvas element. Use the following:

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元素的坐标由以下元素给出:canvas._offset.left和canvas._offset.top

As you can see in the code, the coordinates of the canvas element are given by: canvas._offset.left and canvas._offset.top

这篇关于fabric.js抵消解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！