Java 如何在android画布中绘制一个实心三角形？

How to draw a filled triangle in android canvas?

提问by Pavel

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

所以我在我的 draw 方法中使用下面的代码在 android 地图中绘制这个三角形：

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?

pointX_returned 是我从字段中获取的坐标。它们基本上是纬度和经度。结果是一个漂亮的三角形，但内部是空的，因此我可以看到地图。有没有办法以某种方式填充它？

采纳答案by Nicolas C.

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.

并为您的路径使用此颜色，而不是您的 ARGB。确保路径的最后一个点在第一个点结束，这也很有意义。

Tell me if it works please !

请告诉我它是否有效！

回答by Pavel

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!

感谢尼古拉斯的提示！

回答by GBouerat

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());

回答by Faakhir

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);

}

回答by kaftanati

You need remove path.moveTo after first initial.

您需要在第一个初始之后删除 path.moveTo 。

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();

回答by scottyab

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.

使用@Pavel 的答案作为指导，如果您没有点但有起始 x、y 和高度和宽度，这里有一个辅助方法。也可以绘制倒置/倒置 - 这对我很有用，因为它被用作垂直条形图的末端。

 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);
    }

回答by Daniel Nyamasyo

this function shows how to create a triangle from bitmap. That is, create triangular shaped cropped image. Try the code below or download demo example

此函数显示如何从位图创建三角形。也就是说，创建三角形裁剪图像。试试下面的代码或下载演示示例

 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 an triangular image drawn on canvas. Read more

上面的函数返回在画布上绘制的三角形图像。阅读更多

回答by oli.G

Don't moveTo()after each lineTo()

不要moveTo()在每个lineTo()

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

换句话说，删除moveTo()除第一个之外的所有内容。

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

说真的，如果我只是复制粘贴 OP 的代码并删除不必要的moveTo()调用，它就可以工作。

Nothing else needs to be done.

没有其他事情需要做。

---

---

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

编辑：我知道 OP 已经发布了他的“最终工作解决方案”，但他没有说明它为什么有效。真正的原因让我很惊讶，所以我觉得有必要补充一个答案。