0

Thank you in advance for paying attention to my problem.

I am using a library called react-konva for working with canvas. My task was to build the angle between two lines and display it. Now it works, not perfectly, but still... But I can't resolve the issue with displaying of angle.

Angle displaying

In the example above I can move the dots in any directions. And I have to calculate the text rotation.

Here is my code

<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
  }

I need to rotate some container for text but not rotating text. So 112 should display in the same position but its text should not be rotated.

Hope I explained available.

Praud
  • 297
  • 3
  • 13
  • 1
    You could calculate the position completely in code and not specify an angle in the markup. Something like `pos = (x, y) + offsetRadius * (cos(angle), sin(angle)) . – Nico Schertler May 20 '19 at 15:04
  • It doesn't work for me correctly const textX = x + 45 * Math.cos(angle) const textY = y + 45 * Math.sin(angle) – Praud May 20 '19 at 15:14
  • @NicoSchertler, your answer is correct. I put the wrong values in the formula. Thank you! – Praud May 21 '19 at 10:00

0 Answers0