为什么形状 select 偏移？

Question

我正在使用 Fabric.js，我遇到了一个类似于下面 fiddle 中的问题。

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
  });
});

当我准确地复制和粘贴代码时，出现形状选择器似乎位于形状右下角（偏离形状）的问题。在此示例中，当我将鼠标悬停在形状上时，我无法移动它。我只有从右下角拖动时才能移动。

这个 fiddle 在 fiddle 上没有同样的问题，但是当我把代码放到我的机器上时，我遇到了同样的问题。

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>

为什么 class 的高度和宽度变为 450？？？

Answer 1

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

为什么形状 select 偏移？

Why is the shape select offset?

html

javascript

css

jquery

fabricjs