Before starting this tutorial please check this site https://developer.mozilla.org/enUS/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas and see that you must use paths (2nd example, beginPath) rather than drawing point by point.
On your Activity
Explanation
We create a path and start that path when the MotionEvent is down, or when the user first touch the screen, then add a lineTo, the x and y when the user moves his fingers.
Then stop and push the path we had build to our array of Paths.
public boolean onTouchEvent(MotionEvent event) { .... }
Then during the draw function we loop through the array and print them on our canvas.
public void onDraw(Canvas canvas) { ... }
On your Activity
private ArrayList _graphics = new ArrayList(); private Paint mPaint; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new DrawingPanel(this)); mPaint = new Paint(); mPaint.setDither(true); mPaint.setColor(0xFFFFFF00); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeWidth(3); }On your SurfaceView
@Override public boolean onTouchEvent(MotionEvent event) { synchronized (_thread.getSurfaceHolder()) { if(event.getAction() == MotionEvent.ACTION_DOWN){ path = new Path(); path.moveTo(event.getX(), event.getY()); path.lineTo(event.getX(), event.getY()); }else if(event.getAction() == MotionEvent.ACTION_MOVE){ path.lineTo(event.getX(), event.getY()); }else if(event.getAction() == MotionEvent.ACTION_UP){ path.lineTo(event.getX(), event.getY()); _graphics.add(path); } return true; } } @Override public void onDraw(Canvas canvas) { for (Path path : _graphics) { //canvas.drawPoint(graphic.x, graphic.y, mPaint); canvas.drawPath(path, mPaint); } }
Explanation
We create a path and start that path when the MotionEvent is down, or when the user first touch the screen, then add a lineTo, the x and y when the user moves his fingers.
Then stop and push the path we had build to our array of Paths.
public boolean onTouchEvent(MotionEvent event) { .... }
Then during the draw function we loop through the array and print them on our canvas.
public void onDraw(Canvas canvas) { ... }
No comments:
Post a Comment
Did this post help you? Do you have any questions? Drop your thoughts here...