Fabric.js - 通过鼠标拖动创建折线形状不会将形状居中到其边界框

Question

我正在创建一个带有(折线)工具的三角形,试图制作一个矩形三角形.一切都很好,但创建的三角形不在它的边界框内,这会导致事后的问题.我已经实现了它来创建一个多边形,多边形在它的边界框内居中,但应用相同的技术似乎不适用于折线三角形的情况.

显示不良影响的图像

这个jsFiddle显示出不需要的行为.

也许我必须改变'originX'和'originY',但我尝试了几种不同的组合,但没有解决:

const triangle = new fabric.Polyline(calcPoints(originX, originY, originX, originY), {
objectCaching: false,
left: originX,
top: originY,
originX: 'left',
originY: 'top',
fill: '#0000FF',
includeDefaultValues: false});

我还在鼠标上使用newShape.setPositionByOrigin方法:

newShape.setPositionByOrigin(position, 'top', 'left'); 

对于多边形情况,我还为形状应用了pathOffset,但这里导致事件更大的偏移量.

有没有办法修复放置在边界框中的形状？

问候!

Answer 1

If you need a rightangle triangle you can override fabric.Rect.

DEMO

var canvas = new fabric.Canvas("my-canvas", {
  backgroundColor: '#fff',
  width: 400,
  height: 400
});
fabric.RectangleTriangle = fabric.util.createClass(fabric.Rect, {
  type: 'rectangleTriangle',
  _render: function(ctx) {
    var w = this.width,
      h = this.height,
      x = -this.width / 2,
      y = -this.height / 2;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y + h);
    ctx.lineTo(x + w, y + h);
    ctx.lineTo(x, y);
    ctx.closePath();
    this._renderPaintInOrder(ctx);
  }
});
fabric.RectangleTriangle.fromObject = function(object, callback) {
  return fabric.Object._fromObject('RectangleTriangle', object, callback);
};
var rect, isDown, origX, origY;

function onMouseDown(o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  var pointer = canvas.getPointer(o.e);
  rect = new fabric.RectangleTriangle({
    left: origX,
    top: origY,
    width: pointer.x - origX,
    height: pointer.y - origY,
    fill: 'blue',
    selectable:false
  });
  canvas.add(rect);
};

function onMouseMove(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);

  if (origX > pointer.x) {
    rect.set({
      left: Math.abs(pointer.x)
    });
  }
  if (origY > pointer.y) {
    rect.set({
      top: Math.abs(pointer.y)
    });
  }

  rect.set({
    width: Math.abs(origX - pointer.x)
  });
  rect.set({
    height: Math.abs(origY - pointer.y)
  });
  canvas.renderAll();
};

function onMouseUp(o) {
  isDown = false;
  rect.setCoords();
};

function select() {
  canvas.off('mouse:up', onMouseUp);
  canvas.off('mouse:move', onMouseMove);
  canvas.off('mouse:down', onMouseDown);
  canvas.selection = true;
  objectSelectable(true);
}

function draw() {
  canvas.on('mouse:up', onMouseUp);
  canvas.on('mouse:move', onMouseMove);
  canvas.on('mouse:down', onMouseDown);
  canvas.selection = false;
  objectSelectable(false);
}

function objectSelectable(value) {
  canvas.forEachObject(function(obj) {
    obj.selectable = value;
  })
}
draw();

canvas{
  border:2px solid;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="select()">select</button>
<button onclick="draw()">draw</button>
<div id="wrapper">
	<canvas id="my-canvas"></canvas>
</div>