为什么形状选择偏移量？

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。唯一的区别是 Win 10 和 Win 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

不确定是什么问题，但升级到最新一期的 Fabric JS (1.7.2)，问题就消失了。