Блог

Главная - Вопросы по программированию - FabricJS — Создать прямоугольник, используя 4 точки (tl, tr, bl, br)?

FabricJS — Создать прямоугольник, используя 4 точки (tl, tr, bl, br)?

#javascript #canvas #fabricjs

#javascript #холст #fabricjs

Вопрос:

Создать прямоугольник в FabricJs просто, используя top , left , width и height значения.

После перемещения, масштабирования и поворота прямоугольника вокруг, можно получить окончательную координату прямоугольника, используя aCoords объект, возвращая bl , br , tl , tr координаты x и y четырех ребер прямоугольников.

Как можно воссоздать тот же прямоугольник, используя только эти четыре координаты, которые также включают вращение и масштабирование?

Я смог воссоздать прямоугольник только после его перемещения и масштабирования, но не с поворотами.

FabricJS создает прямоугольник, используя только координаты проблема

Это изображение выше является скриншотом следующего jsFiddle: https://jsfiddle.net/7neukojd/32 /

Как вы можете видеть, левая сторона — это исходный прямоугольник (синий), который был масштабирован, перемещен и повернут. Прямоугольник с правой стороны (красный) — это я, пытаюсь скопировать его, используя только bl координаты , br , tl и tr .

Ответ №1:

Благодаря asturur эта проблема была решена с помощью следующего кода

   let rectObj = canvas1.getObjects()[0];
  const tl = rectObj.aCoords.tl;
  const tr = rectObj.aCoords.tr;
  const bl = rectObj.aCoords.bl;
  
  let rectCopy = new fabric.Rect({
    left: rectObj.aCoords.tl.x,
    top:  rectObj.aCoords.tl.y,
    width: (new fabric.Point(tl.x, tl.y).distanceFrom(tr)),
    height: (new fabric.Point(tl.x, tl.y).distanceFrom(bl)),
    angle: fabric.util.radiansToDegrees(Math.atan2(tr.y - tl.y, tr.x - tl.x)),
    fill: "red",
  })

Источник: https://github.com/fabricjs/fabric.js/discussions/6834#discussioncomment-314599

Метки: