How to alter the output of Android Canvas.drawTextOnPath()

Question

I'm new in Android and I've written the following sample code.

public class Circle extends View {
    Paint paint = new Paint();
    Path path = new Path();
    private static final String s = "Hello world example";

    public Circle(Context context) {
      super(context);
      paint.setColor(Color.BLACK);
      paint.setStyle(Style.STROKE);
      paint.setStrokeWidth(2);
      paint.setAntiAlias(true);
      paint.setTextSize(30);
    }

    public void onDraw(Canvas c) {    
      path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);
      c.drawTextOnPath(s, path, 0, 10, paint);
      setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    } 

  }

The Canvas.drawTextOnPath() is displaying the the text beginning from the right side (I mean positive X-axis). I want to display the text from top in a clock-wise. I want to change the starting position of the text. I'm confused about Android Canvas.translate() and Canvas.scale(). Or should I use Canvas.rotate()? I've pasted the output below for clear understanding my question. enter image description here

I want to display the output in this form.

enter image description here

In your line `path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);` instead of `180` write `0` and then try. — GrIsHu, Sep 27 '13 at 06:19
The argument `180` in the `path.addCircle()` is the radius of the circle. This method is defining the `path` to be a `circle`. Changing it to `0` will create a `path` as `circle` of radius `0`. Is there any other way? — Ibungo, Sep 27 '13 at 06:29
Oh! Finally I fixed it by adding `Canvas.rotate(float degrees, float px, float py)` before `Canvas.drawTextOnPath()` in my code. I've pasted the answer below. — Ibungo, Sep 27 '13 at 09:23
Great! Post your answer and close the question so that other can come to know. — GrIsHu, Sep 27 '13 at 09:27

Ibungo · Accepted Answer · 2013-09-27T15:02:28.770

I've finally fixed my Canvas issue by adding the Canvas.rotate(float degrees, float px, float py) in my code before applying and Canvas methods. Below is the code.

public class Circle extends View {
    Paint paint = new Paint();
    Path path = new Path();
    private static final String s = "Hello world example";

    public Circle(Context context) {
      super(context);
      paint.setColor(Color.BLACK);
      paint.setStyle(Style.STROKE);
      paint.setStrokeWidth(2);
      paint.setAntiAlias(true);
      paint.setTextSize(30);
    }

    public void onDraw(Canvas c) {   
      c.rotate(-90, getWidth()/2, getHeight()/2);
      path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);
      c.drawTextOnPath(s, path, 0, 10, paint);
      setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    } 
}

I tried Canvas.rotate(float degrees) before but didn't worked. However, Canvas.rotate(float degrees, float px, float py) worked!

score 2 · Answer 2 · answered Oct 26 '14 at 18:20

Instead of circle, arc can be used:

Path path = new Path(); RectF rect = new RectF(width/2 - radius, height/2 - radius, width/2 + radius, height/2 + radius); path.addArc(rect 270, 270); canvas.drawTextOnPath(msg., path, 0, 0, paint);

The path can be translated, rotated and scaled by using Matrix. For example, the above code will draw the text starting from the first quadrant, i.e, from (y, 0). To start the drawing from (-y, 0) in clockwise direction,

 Path path = new Path();
 RectF rect = new RectF(width/2 - radius, height/2 - radius, width/2 + radius, height/2 + radius);
 Matrix matrix = new Matrix();
 matrix.setScale(-1, -1, width/2, height/2);
 path.addArc(rect, 270, 270);
 path.transform(matrix);
 canvas.drawTextOnPath(msg, path, 0, 0, paint);

How to alter the output of Android Canvas.drawTextOnPath()

2 Answers2