Question

使用2.0.7版本的fabricjs。

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

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

可能是我做错了什么？

Answer 1

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

因此，只需使用canvas.getPointer(opt.e)代替您的代码，这将为您提供准确的顶部和左侧使用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Fabric.js库Rect（）方法无法正常工作

1 个答案: