emojis not rotating with canvas

Question

I have created an applications that allows users to paint with text, including emojis. The user can rotate and resize the text to their liking. The problem occurs when the user rotates text that includes emojis.

As you can see, there is unwanted overlap. I have deduced that this is because i draw the text twice to achieve a border affect. Whats interesting, is that the problem solves itself if the text size exceeds a certain amount. this can be seen in the bottom most test.

Here is the code that drew the above image:

    public void draw(Canvas c, int x, int y) {

    Rect re = new Rect();
    Paint p = new Paint();
    p.setColor(this.color);
    p.setTextSize(this.GetSize());
    p.getTextBounds(text, 0, text.length(), re);
    p.setAntiAlias(true);

    c.save();
    c.rotate(rotation_deg, x, y);

    c.drawText(text, x - re.width() / 2, y + ((re.height() - re.bottom) - re.height() / 2), p);

    p.setStyle(Paint.Style.STROKE);
    p.setColor(color2);
    c.drawText(text, x - re.width() / 2, y + ((re.height() - re.bottom) - re.height() / 2), p);

    c.restore();
}

removing the first draw command fixes the emoji problem, but then i just get the text stroke.

How can i rotate text that includes emojis?

One possible solution is to draw to a bitmap first, and then rotate the bitmap, but this process would waste both ram and time.

Answer 1

Since you know how to solve the problem I would investigate using Paint.setShadowLayer(float radius, float dx, float dy, int shadowColor) and not drawing the text twice.

public void setShadowLayer (float radius, float dx, float dy, int shadowColor)

This draws a shadow layer below the main layer, with the specified offset and color, and blur radius. If radius is 0, then the shadow layer is removed.

Can be used to create a blurred shadow underneath text. Support for use with other drawing operations is constrained to the software rendering pipeline.

The alpha of the shadow will be the paint's alpha if the shadow color is opaque, or the alpha from the shadow color if not.

public void draw(Canvas c, int x, int y) {

    Rect re = new Rect();
    Paint p = new Paint();
    p.setColor(this.color);
    p.setTextSize(this.GetSize());
    p.getTextBounds(text, 0, text.length(), re);
    p.setAntiAlias(true);
    p. setShadowLayer (2.0f, 2.0f, -2.0f, this.color);

    c.save();
    c.rotate(rotation_deg, x, y);

    p.setStyle(Paint.Style.FILL_AND_STROKE);
    //p.setStyle(Paint.Style.FILL);

    p.setColor(color2);
    c.drawText(text, x - re.width() / 2, y + ((re.height() - re.bottom) - re.height() / 2), p);

    c.restore();
}