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.