Как правильно отобразить динамически вращаемый угол? - PullRequest
Новая
       17

Как правильно отобразить динамически вращаемый угол?

0 голосов
/ 20 мая 2019

Заранее благодарю за внимание к моей проблеме.

Я использую библиотеку с именем react-konva для работы с canvas . Моей задачей было построить угол между двумя линиями и отобразить его. Теперь это работает, не идеально, но все же ... Но я не могу решить проблему с отображением угла.

Angle displaying

В приведенном выше примере я могу перемещать точки в любых направлениях. И я должен рассчитать поворот текста.

Вот мой код 

<Group>
        <Arc
          x={x}
          y={y}
          clockwise={this.clockwise}
          outerRadius={30}
          innerRadius={30}
          angle={formattedAngle}
          stroke={colors.brandGreen}
          strokeWidth={strokeWidth}
          dash={[5, 5]}
          rotation={this.getArcRotation(angle)}
        />
        <Text
          x={x}
          y={y}
          offsetX={45}
          offsetY={45}
          text={this.displayAngle(formattedAngle)}
          rotation={this.getTextRotation(angle)}
        />
      </Group>

  getTextRotation = angle => {
    let { dots } = this.props
    const radiansOffset = getVectorDirection(dots[0], dots[1])
    if (this.clockwise) {
      return 360 - Math.abs(angle)
    }

    const degreesAngle = radiansToDegrees(angle)
    const degreesOffset = radiansToDegrees(radiansOffset)

    return degreesOffset - degreesAngle
  }

Мне нужно повернуть контейнер для текста, но не вращать текст. Поэтому 112 должно отображаться в той же позиции, но его текст не должен поворачиваться.

Надеюсь, я объяснил доступным.

...