结构.js库 Rect() 方法无法正常工作

Question

使用 2.0.7 版本的 fabricjs。

> Fiddle: http://jsfiddle.net/eugene1983/gu8nna9x/

问题是当我尝试绘制矩形时，它不适用于小尺寸矩形，但它适用于较大尺寸矩形。在 1.2 版本的结构中没有这样的问题。即使是 1.7 版本也有同样的问题。

可能是我做错了什么？

Answer 1

您应该使用内置的 fabric.js 函数来计算画布上的鼠标位置。

因此，与其使用代码，不如使用canvas.getPointer(opt.e)这将为您提供确切的顶部和左侧使用。

此外，您没有考虑鼠标在起始位置之前移动，因此必须使用绝对值计算宽度和高度

var canvas = new fabric.Canvas('c',{
 backgroundColor:'#555',selection:false
});
canvas.requestRenderAll();
var crop = {
  enable: false
};
var rectangle = new fabric.Rect({
  originX: 'left',
  originY: 'top',
  fill: 'fill',
  stroke: '#ccc',
  strokeDashArray: [2, 2],
  width: 1,
  height: 1,
  visible: false
});
canvas.add(rectangle);
canvas.on("mouse:down", function(o) {
  var point = canvas.getPointer(o.e);
  originLeft = point.x;
  originTop = point.y;
  rectangle.set({
    left: point.x,
    top: point.y,
    width:1,
    height:1
  })
  crop.enable = true;
  rectangle.visible = true;
  canvas.bringToFront(rectangle);
  canvas.requestRenderAll();
});
canvas.on("mouse:move", function(o) {
  if (crop.enable) {
    var point = canvas.getPointer(o.e);
    if (originLeft > point.x) {
      rectangle.set({
        left: Math.abs(point.x)
      });
    }
    if (originTop > point.y) {
      rectangle.set({
        top: Math.abs(point.y)
      });
    }
    rectangle.set({
      width: Math.abs(originLeft - point.x),
      height: Math.abs(originTop - point.y)
    });
    canvas.requestRenderAll();
  }
});
canvas.on("mouse:up", function(options) {
  crop.enable = false;
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas width="400" height="400" id="c"></canvas>