如何正确显示动态旋转角度?

时间:2019-05-20 14:20:13

标签: javascript math canvas react-konva

提前感谢您关注我的问题。

我正在使用名为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应该显示在同一位置,但其文本不应旋转。

希望我能解释一下。

0 个答案:

没有答案