0

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

我正在使用一个名为react-konvacanvas库。我的任务是建立两条线之间的角度并显示它。现在它可以工作了,不是很完美,但仍然......但我无法解决显示角度的问题。

角度显示

在上面的示例中,我可以向任何方向移动点。我必须计算文本旋转。

这是我的代码

<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 应该显示在相同的位置,但它的文本不应该被旋转。

希望我解释可用。

4

0 回答 0