Fabric.js - Создание формы полилинии с помощью перетаскивания мышью не центрирует фигуру в ее ограничительной рамке - PullRequest
Новая
       10

Fabric.js - Создание формы полилинии с помощью перетаскивания мышью не центрирует фигуру в ее ограничительной рамке

0 голосов
/ 11 сентября 2018

Я создаю треугольник с помощью инструмента (ломаная линия), пытаясь создать прямоугольный треугольник. Все хорошо, но созданный треугольник не находится внутри его ограничительной рамки, что впоследствии вызывает проблему. Я уже достиг этого, чтобы создать многоугольник, и многоугольник центрируется внутри его ограничительной рамки, но применение тех же техник, похоже, не работает в случае полилинейного треугольника.

Изображение, показывающее нежелательный эффект

Это 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 для фигуры, но здесь это вызывает большее смещение события.

Есть ли способ зафиксировать фигуру в ограничительной рамке?

Привет!

1 Ответ

0 голосов
/ 13 сентября 2018

Если вам нужен прямоугольный треугольник, вы можете переопределить 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>
...