How to draw a filled triangle in android canvas?

Question

So I'm drawing this triangle in android maps using the code below in my draw method:

paint.setARGB(255, 153, 29, 29);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setAntiAlias(true);

Path path = new Path();
path.moveTo(point1_returned.x, point1_returned.y);
path.lineTo(point2_returned.x, point2_returned.y);
path.moveTo(point2_returned.x, point2_returned.y);
path.lineTo(point3_returned.x, point3_returned.y);
path.moveTo(point3_returned.x, point3_returned.y);
path.lineTo(point1_returned.x, point1_returned.y);
path.close();

canvas.drawPath(path, paint);

The pointX_returned are the coordinates which I'm getting from the fields. They are basically latitudes and longitudes. The result is a nice triangle but the insider is empty and therefore I can see the map. Is there a way to fill it up somehow?

As I posted in my answer, just don't moveTo() after each lineTo(), that's all there is. — oli.G, Jul 14 '17 at 12:42
I know it's an old question which already has an (incorrect) accepted answer, and you also posted your final solution which works... but you're not stating why it works, and I hope my comment can save someone the time I've just spent on this :) — oli.G, Jul 14 '17 at 12:43

score 78 · Answer 1 · edited Jul 18 '13 at 10:49

78

Ok I've done it. I'm sharing this code in case someone else will need it:

super.draw(canvas, mapView, true);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

paint.setStrokeWidth(2);
paint.setColor(android.graphics.Color.RED);     
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setAntiAlias(true);

Point point1_draw = new Point();        
Point point2_draw = new Point();    
Point point3_draw = new Point();

mapView.getProjection().toPixels(point1, point1_draw);
mapView.getProjection().toPixels(point2, point2_draw);
mapView.getProjection().toPixels(point3, point3_draw);

Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.moveTo(point1_draw.x,point1_draw.y);
path.lineTo(point2_draw.x,point2_draw.y);
path.lineTo(point3_draw.x,point3_draw.y);
path.lineTo(point1_draw.x,point1_draw.y);
path.close();

canvas.drawPath(path, paint);

//canvas.drawLine(point1_draw.x,point1_draw.y,point2_draw.x,point2_draw.y, paint);

return true;

Thanks for the hint Nicolas!

edited Jul 18 '13 at 10:49

dakshbhatt21

3,558
3
31
40

answered Aug 17 '10 at 10:58

Pavel

5,213
10
34
47

7

I'm pretty sure you don't need the last `lineTo()`. `close()` does that automatically. – Timmmm Sep 27 '12 at 09:34
@Timmmm I've test ,you are right,no need the last lineTo().Thank you. – banxi1988 Jan 21 '13 at 04:20
Thank you so much. I don't know why I had so many issues drawing a triangle, but I've spent the past 20 minutes with various bugs on this tiny problem. – Achal Dave Apr 23 '13 at 07:19
i wonder, would this work with a series of arcTo? not sure how the arcs would be connected, since each arc is specified separately, not as a continuation of the last – steveh Jul 10 '14 at 13:26
1

Here's the simple method for copy-pasting (based on @Pavel's code): https://gist.github.com/ZirconCode/59cae1e2615279eafb29 – ZirconCode Oct 16 '14 at 07:59
can you pleas share your whole code related to triangle drawing. I think you have extended View class, so in that case the extended class and few lines where it is used. It will help me a lot – Shirish Herwade Apr 15 '15 at 14:01
I would just like to point out that the reason this works is that he removed the unnecessary (and as it turns out, malicious) moveTo() calls after every lineTo(). – oli.G Jul 14 '17 at 12:41
1

if you changed `path` to an instance variable, remember to call `path.reset()` after `canvas.drawPath()`. – Sira Lam Apr 04 '18 at 08:42

score 44 · Accepted Answer · answered Aug 17 '10 at 09:50

44

You probably need to do something like :

Paint red = new Paint();

red.setColor(android.graphics.Color.RED);
red.setStyle(Paint.Style.FILL);

And use this color for your path, instead of your ARGB. Make sure the last point of your path ends on the first one, it makes sense also.

Tell me if it works please !

answered Aug 17 '10 at 09:50

Nicolas C.

983
1
8
12

Unfortunately this does not help – oli.G Jul 14 '17 at 12:42
@Nicolas What to use instead of ARGB, if we have to customize color with RGB value instead of using pre-defined values? – pallav bohara Nov 13 '17 at 11:50

score 12 · Answer 3 · edited Jul 18 '13 at 10:57

12

you can also use vertice :

private static final int verticesColors[] = {
    Color.LTGRAY, Color.LTGRAY, Color.LTGRAY, 0xFF000000, 0xFF000000, 0xFF000000
};
float verts[] = {
    point1.x, point1.y, point2.x, point2.y, point3.x, point3.y
};
canvas.drawVertices(Canvas.VertexMode.TRIANGLES, verts.length, verts, 0, null, 0, verticesColors,   0, null, 0, 0, new Paint());

edited Jul 18 '13 at 10:57

dakshbhatt21

3,558
3
31
40

answered Aug 18 '10 at 07:51

GBouerat

480
3
13

2

I don't think this solution handles filled shapes. (cannot test, I don't have my IDE at the moment) – Nicolas C. Aug 18 '10 at 09:40
3

This seems like the more performant solution, but unfortunately this method is not supported on hardware-accelerated views. You can disable hardware acceleration, but then you lose its performance gains: http://developer.android.com/guide/topics/graphics/hardware-accel.html – SurlyDre Nov 15 '13 at 02:42

score 10 · Answer 4 · answered Mar 08 '16 at 17:06

Using @Pavel's answer as guide, here's a helper method if you don't have the points but have start x,y and height and width. Also can draw inverted/upside down - which is useful for me as it was used as end of vertical barchart.

 private void drawTriangle(int x, int y, int width, int height, boolean inverted, Paint paint, Canvas canvas){

        Point p1 = new Point(x,y);
        int pointX = x + width/2;
        int pointY = inverted?  y + height : y - height;

        Point p2 = new Point(pointX,pointY);
        Point p3 = new Point(x+width,y);


        Path path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(p1.x,p1.y);
        path.lineTo(p2.x,p2.y);
        path.lineTo(p3.x,p3.y);
        path.close();

        canvas.drawPath(path, paint);
    }

score 9 · Answer 5 · edited May 22 '23 at 08:57

this function shows how to create a triangle from bitmap. That is, create triangular shaped cropped image.

 public static Bitmap getTriangleBitmap(Bitmap bitmap, int radius) {
        Bitmap finalBitmap;
        if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
            finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                    false);
        else
            finalBitmap = bitmap;
        Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                finalBitmap.getHeight());

        Point point1_draw = new Point(75, 0);
        Point point2_draw = new Point(0, 180);
        Point point3_draw = new Point(180, 180);

        Path path = new Path();
        path.moveTo(point1_draw.x, point1_draw.y);
        path.lineTo(point2_draw.x, point2_draw.y);
        path.lineTo(point3_draw.x, point3_draw.y);
        path.lineTo(point1_draw.x, point1_draw.y);
        path.close();
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }

The function above returns a triangular image drawn on canvas.

oli.G · Answer 6 · 2017-07-14T12:45:16.950

5

Don't moveTo() after each lineTo()

In other words, remove every moveTo() except the first one.

Seriously, if I just copy-paste OP's code and remove the unnecessary moveTo() calls, it works.

Nothing else needs to be done.

EDIT: I know the OP already posted his "final working solution", but he didn't state why it works. The actual reason was quite surprising to me, so I felt the need to add an answer.

edited Jul 14 '17 at 12:45

answered Jul 14 '17 at 12:29

oli.G

1,300
2
18
24

You should have added a comment for this. This isn't an answer. – Angad Singh Sep 04 '18 at 06:48

score 4 · Answer 7 · edited Jul 18 '13 at 10:44

4

private void drawArrows(Point[] point, Canvas canvas, Paint paint) {

    float [] points  = new float[8];             
    points[0] = point[0].x;      
    points[1] = point[0].y;      
    points[2] = point[1].x;      
    points[3] = point[1].y;         
    points[4] = point[2].x;      
    points[5] = point[2].y;              
    points[6] = point[0].x;      
    points[7] = point[0].y;

    canvas.drawVertices(VertexMode.TRIANGLES, 8, points, 0, null, 0, null, 0, null, 0, 0, paint);
    Path path = new Path();
    path.moveTo(point[0].x , point[0].y);
    path.lineTo(point[1].x,point[1].y);
    path.lineTo(point[2].x,point[2].y);
    canvas.drawPath(path,paint);

}

edited Jul 18 '13 at 10:44

dakshbhatt21

3,558
3
31
40

answered May 08 '12 at 11:06

Fakhar

3,946
39
35

1

This is working! Don't forget to use paint.setAntiAlias(true) in order to get a smooth triangle. – Boldijar Paul Oct 02 '14 at 15:08
2

What is the drawVertices call for? – PsiX Dec 18 '14 at 09:43

score 3 · Answer 8 · answered Dec 01 '14 at 15:45

3

You need remove path.moveTo after first initial.

Path path = new Path();
path.moveTo(point1_returned.x, point1_returned.y);
path.lineTo(point2_returned.x, point2_returned.y);
path.lineTo(point3_returned.x, point3_returned.y);
path.lineTo(point1_returned.x, point1_returned.y);
path.close();

answered Dec 01 '14 at 15:45

kaftanati

480
4
5

I dont have 3 point but have only one point x nad y how can i draw a triangle from that point. – Pranav Oct 05 '15 at 10:36

How to draw a filled triangle in android canvas?

8 Answers8

Linked

Related