FabricJs вращает объект, не перемещая положение - PullRequest
Новая
       4

FabricJs вращает объект, не перемещая положение

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

Я пытаюсь установить угол с шагом 90, сохраняя положение визуально одинаковым.У меня это работает, но это действительно хакерский.Может ли кто-нибудь улучшить этот код ex) без необходимости использования операторов switch.https://codesandbox.io/s/lx347ln669

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

triangle.rotate(angle);

Устанавливает «угол» экземпляра с центрированным вращением

Поворот в документах farbic.js

должен вращать треугольник на его центральном вращении. Это действует иначе triangle.set('angle', 90) который, кажется, вращается в зависимости от верхнего левого угла.

Вы также можете найти это полезным, если хотите, чтобы пользователь использовал элементы управления по умолчанию и «привязывал» свои углы: 

straighten(triangle);

Выпрямление объекта (поворот его от текущего угла к 0, 90, 180, 270 и т. Д., В зависимости от того, что ближе)

Выпрямить в fabric.js документах

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

Попробуйте установить originX: 'center' и originY: 'center' при создании треугольника.Нет необходимости менять происхождение при каждом повороте. 

var canvasEl = document.getElementById('c');
var canvas = new fabric.Canvas('c');
var triangle = new fabric.Triangle({
  width: 200,
  height: 200,
  fill: "blue",
  left: 50,
  top: 50,
  originX: "center",
  originY: "center"
});
canvas.add(triangle)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="c"></canvas>
...