Question

我正在使用Fabric.js，并且遇到的问题类似于下面的小提琴。

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），问题就消失了。

为什么形状选择偏移量？

1 个答案: