Как избавиться от границ на каждом новом элементе Polyline? - PullRequest
Новая
       67

Как избавиться от границ на каждом новом элементе Polyline?

0 голосов
/ 24 февраля 2020

Я пытаюсь сделать редактор, но рисование стрелки, кажется, вызывает у меня проблемы. Я нашел этот код здесь от другого StackOverflow Вопрос: Стрелки в Фабри cjs. Я немного изменил его, заставив его появиться на mouse:down, кончик стрелки следует за курсором мыши на mouse:move, затем остановите перетаскивание на mouse:up. Тем не менее, кажется, что есть невидимая граница, почему она там? Как мне избавиться от этого?

Вот мой код : 

const canvas = new fabric.Canvas('c')
canvas.selection = false

// click and drag to draw more arrow!
const headlen = 30  // arrow head size
let pline
let coords = {}
let isDown = false

const calcPoints = ({ startX, startY, endX, endY }) => {
    const angle = Math.atan2(endY - startY, endX - startX)

    // bring the line end back some to account for arrow head.
    endX = endX - (headlen) * Math.cos(angle)
    endY = endY - (headlen) * Math.sin(angle)

  const tip = {
    x: endX + (headlen) * Math.cos(angle),  // tip
    y: endY + (headlen) * Math.sin(angle)
  }

  const tipSides = type => {
    const sol = type === 'pos' ? angle + Math.PI / 2 : angle - Math.PI / 2
    return {
      x: endX - (headlen) * Math.cos(sol),
      y: endY - (headlen) * Math.sin(sol)
    }
  }

  const tipBottomSides = type => {
    const sol = type === 'pos' ? angle + Math.PI / 2 : angle - Math.PI / 2
    return {
      x: endX - (headlen / 4) * Math.cos(sol),
      y: endY - (headlen / 4) * Math.sin(sol)
    }
  }

  const lineSides = type => {
    const sol = type === 'pos' ? angle + Math.PI / 2 : angle - Math.PI / 2
    return {
      x: startX - (headlen / 4) * Math.cos(sol),
      y: startY - (headlen / 4) * Math.sin(sol)
    }
  }

    // calculate the points.
    return [
        {
            x: startX,  // start point
            y: startY
        },
    lineSides('neg'),
    tipBottomSides('neg'),
    tipSides('neg'),
    tip,
    tipSides('pos'),
    tipBottomSides('pos'),
    lineSides('pos'),
    {
            x: startX,
            y: startY
        }
    ]
}

canvas.on('mouse:down', function(opts) {
    if (opts.target) return

  const pointer = canvas.getPointer(opts.e)
  coords.startX = pointer.x
  coords.startY = pointer.y
  coords.endX = pointer.x
  coords.endY = pointer.y

  isDown = true

    const points = calcPoints(coords)

    pline = new fabric.Polyline(points, {
        fill: 'black',
        stroke: 'black',
        opacity: 1,
        strokeWidth: 1,
    strokeUniform: true,
        originX: 'left',
        originY: 'top',
        selectable: true
    })

    canvas.add(pline)
})

canvas.on('mouse:move', function(opts) {
    if (!isDown) return

  const pointer = canvas.getPointer(opts.e)
  const originalPoints = pline.points

  coords.startX = originalPoints[0].x
  coords.startY = originalPoints[0].y
  coords.endX = pointer.x
  coords.endY = pointer.y

  const points = calcPoints(coords)

  pline.set({   points })
    canvas.renderAll()
})

canvas.on('mouse:up', function() {
    isDown = false;
})

EDIT1 : только что обнаружил, что высота и ширина сделали не изменяется относительно размера стрелки. Я рассчитал это с начальной точкой стрелки и точкой наконечника, но начальная позиция не остается фиксированной. Я думаю, так как размер привязанного изменяется, точка происхождения меняется вместе с ним? Как можно это исправить? 

const width = Math.abs(pline.points[0].x - pline.points[4].x)
const height = Math.abs(pline.points[0].y - pline.points[4].y)
...