android canvas draw text on circle radius based-CodePudding

I need to make lucky wheel like view, and there texts are drawn regarding the radius, as you can see image below. ( there you can see red line, I want to draw texts along that red line )

This is the result I want to achieve but, right now with my method, it just draws text based on circle like below

private void drawText(Canvas canvas, float tempAngle, float sweepAngle, String text) {
        Path path = new Path();
        Log.d("mytag", "tempAngle = "   tempAngle   ", sweepAngle = "   sweepAngle);
        path.addArc(range, tempAngle, sweepAngle);
        float textWidth = textPaint.measureText(text);
        int hOffset = (int) (radius * Math.PI / mWheelItems.size() / 2 - textWidth / 2);
        int vOffset = (radius / 2 / 3) - 15; // here 15 is distance from image
        canvas.drawTextOnPath(text, path, hOffset, vOffset, textPaint);
    }

CodePudding user response：

Instead of creating an arc to draw the text on, you need a path from the outside of the circle to the center. I think you need something like this

    int radius = 180;
    float centerX = width/2f;
    float centerY = height/2f

    double radians = radius * Math.PI / 180;
    float x = (float)Math.sin(radians);
    float y = (float)-Math.cos(radians);

    Path path = new Path();
    path.moveTo(x,y);
    path.lineTo(centerX, centerY);

    canvas.drawTextOnPath(text, path, hOffset, vOffset, textPaint);

CodePudding user response：

First, find the slice centre points.

Kotlin sample snippet

 val arcCenter = startAngle   (arcProgress / 2)
    //middle point radius is half of the radius of the circle
    val pointRadius = size.width / 4

    /*Calculate the x & y coordinates
    * find points using angle and radius
    *https://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates
    * */
    val x =
        (pointRadius * cos(Math.toRadians(arcCenter.toDouble())))  
                size.center.x
    val y =
        (pointRadius * sin(Math.toRadians(arcCenter.toDouble())))  
                size.center.y

Then Rotate your canvas to the arch centre angle, Draw your text and restore the canvas to a normal position

it.nativeCanvas.rotate( arcCenter, x, y) 
 it.nativeCanvas.drawText(...)
it.nativeCanvas.rotate( -arcCenter, x, y)