为什么形状选择偏移？

Question

我正在使用Fabric.js，并且有一个类似于下面小提琴中的问题。

http://jsfiddle.net/fabricjs/S9sLu/

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;

// create grid

for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: true }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}

// add objects

canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({ 
  left: 300, 
  top: 300, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

// snap to grid

canvas.on('object:moving', function(options) { 
  options.target.set({
    left: Math.round(options.target.left / grid) * grid,
    top: Math.round(options.target.top / grid) * grid
  });
});

当我准确地复制和粘贴代码时，我会得到一个问题，即形状选择器似乎位于形状的右下角(离开形状)。在这个例子中，我不能移动形状当我悬停在它之上。只有当我从右下角拖动时，我才能移动。

这个小提琴在小提琴上没有相同的问题，但是当我把代码带到我的机器上时，我也有同样的问题。

http://jsfiddle.net/5KKQ2/

我遗漏了什么？?

谢谢

更新

我正在研制的计算机似乎很具体。我能够在另一台机器上安装和运行，没有这个问题。两者都在使用Xampp，firefox。唯一的区别是10胜7胜，但这会导致问题吗？

当它们加载到每台计算机上时，它们是有区别的。

不工作一个html看起来是这样..。

<div class="canvas-container" style="width: 300px; height: 300px; position: relative; -moz-user-select: none;">
<canvas id="canvas" class="lower-canvas" height="450" width="450" style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
<canvas class="upper-canvas " style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="300" height="300"></canvas>
</div>

工作看起来是这样的

<div class="canvas-container" style="width: 300px; height: 300px; position: relative; -moz-user-select: none;">
<canvas id="canvas" class="lower-canvas" height="300" width="300" style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
<canvas class="upper-canvas " style="position: absolute; width: 300px; height: 300px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="300" height="300"></canvas>

​

为什么这个班的高度和宽度要到450？

Answer 1

不知道问题是什么，但升级到最新一期的织物JS (1.7.2)，这个问题已经消失。