How to draw a line in different patterns using canvas?

Question

Hi, I want to draw a line in different patterns using canvas.

Any idea or suggestion is appreciated .. !!!!

Thanks in advance.

Answer 1

You must use Path . The docs say:

The Path class encapsulates the composition of a (multi-loop) geometric path, consisting of straight line segments, quadratic curves, and cubic curves ....

For example, you can expand the view and add touch event positions to the Path method in the onTouchEvent(MotionEvent event) your view. Then you need to create random positions corresponding to the latest touch event and add them to other instances of the path. Finally, in the onDraw() method of your view, draw all the paths. Hope this snippet helps you understand my idea:

 public class NetCanvas extends View { private static final double MAX_DIFF = 15; Path path0 = new Path(); Path path = new Path(); private Paint p0; private Paint p; public NetCanvas(Context context) { super(context); p0 = new Paint(); p0.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.GREEN, Color.RED, Shader.TileMode.CLAMP)); p0.setStyle(Style.STROKE); p = new Paint(); p.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.BLUE, Color.MAGENTA, Shader.TileMode.CLAMP)); p.setStyle(Style.STROKE); } @Override public boolean onTouchEvent(MotionEvent event) { float x0 = event.getX(); float y0 = event.getY(); float x = generateFloat(event.getX()); float y = generateFloat(event.getY()); if (event.getAction() == MotionEvent.ACTION_DOWN) { path0.moveTo(x0, y0); path0.lineTo(x0, y0); path.moveTo(x, y); path.lineTo(x, y); } else if (event.getAction() == MotionEvent.ACTION_MOVE) { path0.lineTo(x0, y0); path.lineTo(x, y); } else if (event.getAction() == MotionEvent.ACTION_UP) { path0.lineTo(x0, y0); path.lineTo(x, y); } invalidate(); return true; } @Override public void onDraw(Canvas canvas) { canvas.drawPath(path0, p0); canvas.drawPath(path, p); } private float generateFloat(Float f){ double d = (Math.signum(2*Math.random() - 1)) * Math.random() * MAX_DIFF; return (float) (f + d); } } 

In the above code, I used two Path s, but you can use three or more . Also, the result depends on the speed of your finger on the screen. For instance:

or it might look like this:

Edit:

Above the class ( NetCanvas ) extends the view , so you can create an instance of it and use this instance like other types. For example, you can simply set its instance as a ContentView its activity. Here I override the onCreate() Activity method:

 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new NetCanvas(this)); } 

Although you can modify NetCanvas to extend SurfaceView with some other changes.

Answer 2

I modified NetCanvas to draw the shape as the second image in your question:

 public class NetCanvas1 extends View { Path path0 = new Path(); private Paint p0; private int points_Num = 20; private int first_Points_Num = 5; public NetCanvas1(Context context) { super(context); p0 = new Paint(); p0.setShader(new LinearGradient(0, 0, 230, getHeight(), Color.GREEN, Color.RED, Shader.TileMode.CLAMP)); p0.setStyle(Style.STROKE); } @Override public boolean onTouchEvent(MotionEvent event) { float x0 = event.getX(); float y0 = event.getY(); if (event.getAction() == MotionEvent.ACTION_DOWN) { path0.moveTo(x0, y0); path0.lineTo(x0, y0); } else if (event.getAction() == MotionEvent.ACTION_MOVE) { path0.lineTo(x0, y0); } else if (event.getAction() == MotionEvent.ACTION_UP) { path0.lineTo(x0, y0); invalidate(); } return true; } @Override public void onDraw(Canvas canvas) { canvas.drawPath(path0, p0); FlaotPoint[] pointArray = getPoints(); try { for (int i = 0; i < first_Points_Num; i++) { for (int j = i; j < pointArray.length; j++) { canvas.drawLine(pointArray[i].getX(), pointArray[i].getY(), pointArray[j].getX(), pointArray[j].getY(), p0); } } path0.reset(); } catch (Exception e) { } } private FlaotPoint[] getPoints() { FlaotPoint[] pointArray = new FlaotPoint[points_Num]; PathMeasure pm = new PathMeasure(path0, false); float length = pm.getLength(); float distance = 0f; float speed = length / points_Num; int counter = 0; float[] aCoordinates = new float[2]; while ((distance < length) && (counter < points_Num)) { // get point from the path pm.getPosTan(distance, aCoordinates, null); pointArray[counter] = new FlaotPoint(aCoordinates[0], aCoordinates[1]); counter++; distance = distance + speed; } return pointArray; } class FlaotPoint { float x, y; public FlaotPoint(float x, float y) { this.x = x; this.y = y; } public float getX() { return x; } public float getY() { return y; } } } 

The result depends on the values ​​of points_Num , first_Points_Num and the order of the points associated with in lines for loops:

 for (int i = 0; i < first_Points_Num; i++) { for (int j = i; j < pointArray.length; j++) { canvas.drawLine(pointArray[i].getX(), pointArray[i].getY(), pointArray[j].getX(), pointArray[j].getY(), p0); } } 

You can change the value of each variable or the order of points to change the result. The result may look like this:

My idea is simple: Get points out of the way and connect them with lines . If you want to see more detailed information about getting points from a path, which is done in the getPoints() method, you can see this answer and it is referenced. I hope this helps you.