Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw filled triangle on android Canvas

Tags:

I have class MyView that extends View class. MyView should draw filled triangle. I drew a triangle but I cannot get it filled. This is my onDraw() method:

@Override protected void onDraw(Canvas canvas) {     super.onDraw(canvas);     Paint paint = new Paint();      paint.setColor(android.graphics.Color.BLACK);     canvas.drawPaint(paint);      paint.setStrokeWidth(4);     paint.setColor(android.graphics.Color.RED);     paint.setStyle(Paint.Style.FILL_AND_STROKE);     paint.setAntiAlias(true);      Point a = new Point(0, 0);     Point b = new Point(0, 100);     Point c = new Point(87, 50);      Path path = new Path();     path.setFillType(FillType.EVEN_ODD);     path.moveTo(a.x, a.y);     path.lineTo(b.x, b.y);     path.moveTo(b.x, b.y);     path.lineTo(c.x, c.y);     path.moveTo(c.x, c.y);     path.lineTo(a.x, a.y);     path.close();      canvas.drawPath(path, paint); } 

This is what I get as a result:

enter image description here

like image 564
Egis Avatar asked Dec 12 '13 13:12

Egis


People also ask

How do I draw a triangle in canvas android?

Simply call drawTriangle with the Canvas to draw on, the Paint to draw with, the X/Y coordinates to draw at, and the width of the triangle.

What is matrix in canvas android?

Matrix. A 3 by 3 Matrix that stores information which can be used to transform a canvas. A Matrix can store the following kind of transformation information: scale, skew, rotation, translation. Below is an example of using a Matrix to transform a Bitmap that is drawn on a Canvas.


2 Answers

I've found the answer

@Override protected void onDraw(Canvas canvas) {     super.onDraw(canvas);     Paint paint = new Paint();      paint.setColor(android.graphics.Color.BLACK);     canvas.drawPaint(paint);      paint.setStrokeWidth(4);     paint.setColor(android.graphics.Color.RED);     paint.setStyle(Paint.Style.FILL_AND_STROKE);     paint.setAntiAlias(true);      Point a = new Point(0, 0);     Point b = new Point(0, 100);     Point c = new Point(87, 50);      Path path = new Path();     path.setFillType(FillType.EVEN_ODD);     path.lineTo(b.x, b.y);     path.lineTo(c.x, c.y);     path.lineTo(a.x, a.y);     path.close();      canvas.drawPath(path, paint); } 
like image 175
Egis Avatar answered Oct 19 '22 09:10

Egis


This answer provides a bit of clarity on where the numbers given in the answer by @Egis come from. (this will draw an upside down equilateral triangle and is written in kotlin)

class TriangleView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {      val paint = Paint()     val path = Path()      override fun onDraw(canvas: Canvas?) {         super.onDraw(canvas)         canvas ?: return         canvas.drawPath(configurePath(canvas.width.toFloat(), path), configurePaint(paint))     }      fun getHeight(width: Double): Float {         return Math.sqrt((Math.pow(width, 2.0) - Math.pow((width / 2), 2.0))).toFloat()     }      fun configurePaint(paint: Paint): Paint {         paint.color = android.graphics.Color.WHITE         paint.isAntiAlias = true          return paint     }      fun configurePath(width: Float, path: Path): Path {         path.lineTo((width / 2f), getHeight(width.toDouble()))         path.lineTo(width, 0F)         path.lineTo(0f, 0f)          return path     } } 

The get height function is Pythagoras' Theorem and will always find the height of an equilateral triangle to be ~87% of its side length

Gist can be found here, it contains code for the other direction

like image 28
Joe Maher Avatar answered Oct 19 '22 11:10

Joe Maher