开发者

Android: how to combine the paths of two shapes and remove overlap?

I want to create a speech balloon type shape, where there is a rectangle or ellipse with a triangular shape jutting out of it.

How I'm attempting to do this is to create a Path object that combines the triangle with the other shape (round rect).

I'm doing it as follows:

Path path = new Path();
// Create triangular segment

Point drawOffset = getAttributes().getDrawOffset();
int leaderGap = getAttributes().getLeaderGapWidth();

// Recall that we have a coordinate system where (0,0) is the
// bottom midpoint of the annotation rectangle.

// the point to left of gap
int x1 = -leaderGap/2;
int y1 = 0;

// the point to right of gap
int x2 = leaderGap/2;
int y2 = 0;

// The point where we're drawing to; the end of the pointy segment of triangle
int x3 = -drawOffset.x;
int y3 = drawOffset.y;

path.moveTo(x2, y2);
path.lineTo(x3, y3);
path.lineTo(x1, y1);
// path.close();


// Add the rectangular portion to the path
path.addRoundRect(backgroundShape, 5, 5, Path.Direction.CW);

The problem is that the roundRect is a closed path, so its edge shows through underneath the triangular section.

A picture's worth a thousand words, so here you go:

Android: how to combine the paths of two shapes and remove overlap?

What I want is for the line segment between those two endpoints of the triangle to disappear, so that it looks like one seamless path.

If all I were doing were a straight rectangle, I could create the whole path myself from scratch. But I'd like to do the rounded corners, and it'd be a bit of a paint 开发者_如何学JAVAto do that with the Path (yes I know you can do quad to and arcTo but it's still not as clean a solution as I'd like).

So in general, is it possible to combine two paths and create a single union object that traces the perimeter of both?


Yes this is possible as of API 19. You can perform logical operations between 2 paths. As in your case, you can create a UNION of the two paths, using Path.op(). For a complete list of the operations that can be performed refer here.


I can't see a convenient way to combine paths in this manner. I would normally achieve this by manually drawing the rounded rectangular parts with Path.arcTo() and Path.lineTo(), it's a little extra effort but it will achieve the result you are looking for.

Another option which is perhaps more flexible if you decide to change the theme is to use a ninepatch drawable there's even an editor to let you create them called Draw 9-patch

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜