I'm trying to develop a simple "draw-on-touch" and I want to draw the different paths that the user places in an onTouch listener.
I've got a simple problem. When I draw the paths I obtain a single path drawn in the points of the last onTouch entry.
I think the paths are all drawn over the last path because I use a Paint with a 150 alpha and it looks more solid in the second and succesive onTouch entries.
How could I solve that? Thanks!
public class PaintView extends View implements OnTouchListener {
List<List<Point>> paths = new ArrayList<List<Point>>();
List<Point> points = new ArrayList<Point>();
Paint paintLine = new Paint();
Paint paintCircle = new Paint();
public PaintView(Context context) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
paintLine.setStyle(Paint.Style.STROKE);
paintLine.setStrokeWidth(10);
paintLine.setColor(Color.GREEN);
paintLine.setAlpha(150);
}
public void onDraw(Canvas canvas) {
Path path = new Path();
List<Point> pointsList;
List<Path> pathList = new ArrayList<Path>();
Point point = new Point();
for (int i = 0; i < paths.size(); i++) {
pointsList = paths.get(i);
path.reset();
boolean first = true;
for (int j = 0; j < points.size(); j+=2 ) {
point = pointsList.get(j);
if (first) {
first = false;
path.moveTo(point.x, point.y);
} else if (j < pointsList.size() - 1 ) {
Point nextPoint = pointsList.get(j+1);
path.quadTo(point.x, point.y, nextPoint.x, nextPoint.y);
} else {
path.lineTo(point.x, point.y);
}
}
pathList.add(path);
}
for (Path pathDraw : pathList) {
canvas.drawPath(pathDraw, paintLine);
}
}
public boolean onTouch(View view, final MotionEvent event) {
Point point = new Point();
point.x = event.getX();
point.y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// DO SOMETHING
points.clear();
points.add(point);
break;
case MotionEvent.ACTION_MOVE:
points.add(point);
break;
case MotionEvent.ACTION_UP:
points.add(point);
paths.add(points);
break;
default:
return false;
}
invalidate();
return true;
}
}
The problem is that you are drawing paths constructed with the points in the points list repeatedly.
Note that invalidate() call in onTouch, each of this call will trigger a redraw event, which causes onDraw to be called, everything looks fine at this point. The problem is you only did points.clear() on ACTION_DOWN event, but you also should have cleared them on ACTION_MOVE and ACTION_UP events. Instead, you keep all the points collected previously and draw the paths constructed with all those points in onDraw. So you are effectively drawing repeatedly some of the paths constructed with the points collected previously.
Note in a drag motion, there will be 1 ACTION_DOWN, N ACTION_MOVE, 0 or 1 ACTION_UP events.
Related
I want to draw curved line in android studio without ArrayList.
I know how to draw with Arraylist, but I just want to know without Arraylist.
Anyhow, I want to draw curved line a set length without use Arraylist. How can I do this?
Here is my code but it doesn't work well.
package com.example.final_practice3;
import...
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
private class MyView extends View {
private int count = 0;
private int[][] points = new int[500][2]; //point x, y in array to 500size
public MyView(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//first point
points[0][0] = (int) getX();
points[0][1] = (int) getY();
break;
case MotionEvent.ACTION_MOVE:
//When finger is moving, save to points array
for (int i = 1; i < 500; i++) {
points[i][0] = (int) event.getX();
points[i][1] = (int) event.getY();
count++;
}
break;
case MotionEvent.ACTION_UP:
//When finger is up, draw the curved line
this.invalidate();
break;
}
return true;
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
paint.setAntiAlias(true);
//draw curved line with points array
for (int i = 1; i < 500; i++) {
canvas.drawLine(points[i - 1][0], points[i - 1][1], points[i][0],points[i][1],paint);
}
}
}
}
I am creating an app to draw free shapes on the surface screen but i could only draw separated points my problem is . i want the points to be connected to each other when i draw them not lifting my finger from the screen . i mean as long as i am touching the screen draw.here's my code so far.
public class SurfaceViewActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new DrawingView(this));
}
class DrawingView extends SurfaceView {
private final SurfaceHolder surfaceHolder;
private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private List<Point> pointsList = new ArrayList<Point>();
public DrawingView(Context context) {
super(context);
surfaceHolder = getHolder();
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (surfaceHolder.getSurface().isValid()) {
// Add current touch position to the list of points
pointsList.add(new Point((int)event.getX(), (int)event.getY()));
// Get canvas from surface
Canvas canvas = surfaceHolder.lockCanvas();
// Clear screen
canvas.drawColor(Color.BLACK);
// Iterate on the list
for(int i=0; i<pointsList.size(); i++) {
Point current = pointsList.get(i);
// Draw points
canvas.drawPoint(current.x, current.y, paint);
}
// Release canvas
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
return false;
}
}
}
you can use this function to draw smooth lines
public void drawBrzierLine(Canvas mCanvas, float xi, float yi, float xd, float yd) {
Point start = new Point((int) xi, (int) yi);
Point end = new Point((int) xd, (int) yd);
Path mPath = new Path();
mPath.reset();
mPath.moveTo(start.x, start.y);
mPath.quadTo(start.x, start.y, end.x, end.y);
mCanvas.drawPath(mPath, mPaint);
}
In onTouchEvent(MotionEvent event) you only handle ACTION_DOWN. So this code will only run when you press down on the screen. Use ACTION_MOVE instead.
http://developer.android.com/reference/android/view/MotionEvent.html
In my app Draw paint in free hand on Map view but searching lot of information finally got from rectangle shape draw on mapview but i want in place of rectangle draw free hand like zigzag how to change my code Any help please..
MapOverlay.java
public class MapOverlay extends Overlay {
private float x1,y1,x2,y2;
private GeoPoint p1=null,p2=null;
private MapExampleActivity mv = null;
private Paint paint = new Paint();
private Path path = new Path();
private boolean isUp = false;
//constructor receiving the initial point
public MapOverlay(MapExampleActivity mapV,float x,float y){
paint.setStrokeWidth(2.0f);
x1 = x;
y1 = y;
mv = mapV;
p1 = mapV.getMapView().getProjection().fromPixels((int)x1,(int)y1);
}
//override draw method to add our custom drawings
#Override
public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when) {
if(p1 != null && p2 != null){
//get the 2 geopoints defining the area and transform them to pixels
//this way if we move or zoom the map rectangle will follow accordingly
Point screenPts1 = new Point();
mapView.getProjection().toPixels(p1, screenPts1);
Point screenPts2 = new Point();
mapView.getProjection().toPixels(p2, screenPts2);
//draw inner rectangle
paint.setColor(Color.BLUE);
// paint.setStyle(Style.FILL);
canvas.drawPath(path, paint);
canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
//draw outline rectangle
// paint.setColor(Color.YELLOW);
paint.setStyle(Style.STROKE);
// canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
canvas.drawPath(path, paint);
}
return true;
}
#Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
if(mv.isEditMode() && !isUp){
if(e.getAction() == MotionEvent.ACTION_DOWN){
x1 = y1 = 0;
x1 = e.getX();
y1 = e.getY();
p1 = mapView.getProjection().fromPixels((int)x1,(int)y1);
}
//here we constantly change geopoint p2 as we move out finger
if(e.getAction() == MotionEvent.ACTION_MOVE){
x2 = e.getX();
y2 = e.getY();
p2 = mapView.getProjection().fromPixels((int)x2,(int)y2);
}
//---when user lifts his finger---
if (e.getAction() == MotionEvent.ACTION_UP) {
isUp = true;
}
return true;
}
return false;
}
}
using this i able to draw like this rectangle shapes and draw up to again you click the toggle button(possible to draw multiple times)
i want draw lines instead of rectangle like below image(draw multiple times).
finally i found this link this link provide rectangle shape draw http://n3vrax.wordpress.com/2011/08/13/drawing-overlays-on-android-map-view/
just change rectangle to free draw any idea please....
You can free hand draw a line using the code bellow:
Code
public class HandDrawOverlay extends Overlay {
private boolean editMode = false;
private boolean isTouched = false;
private Paint paint = new Paint();
private Point screenPt1 = new Point();
private Point screenPt2 = new Point();
private ArrayList<GeoPoint> points = null;
public HandDrawOverlay(){
paint.setStrokeWidth(2.0f);
paint.setStyle(Style.STROKE);
paint.setColor(Color.BLUE);
}
#Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
if(points != null && points.size() > 1){
mapView.getProjection().toPixels(points.get(0), screenPt1);
for(int i=1; i<points.size();i++){
mapView.getProjection().toPixels(points.get(i), screenPt2);
canvas.drawLine(screenPt1.x, screenPt1.y, screenPt2.x, screenPt2.y, paint);
screenPt1.set(screenPt2.x, screenPt2.y);
}
}
}
#Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
if(editMode){
int x = (int)e.getX();
int y = (int)e.getY();
GeoPoint geoP = mapView.getProjection().fromPixels(x,y);
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
isTouched = true;
points = new ArrayList<GeoPoint>();
points.add(geoP);
break;
case MotionEvent.ACTION_MOVE:
if(isTouched)
points.add(geoP);
break;
case MotionEvent.ACTION_UP:
if(isTouched)
points.add(geoP);
isTouched = false;
break;
}
mapView.invalidate();
return true;
}
return false;
}
/**
* #return the editMode
*/
public boolean isEditMode() {
return editMode;
}
/**
* #param editMode the editMode to set
*/
public void setEditMode(boolean editMode) {
this.editMode = editMode;
}
}
to use
HandDrawOverlay handDrawOverlay;
handDrawOverlay = new HandDrawOverlay();
mapView.getOverlays().add(handDrawOverlay);
//Set edit mode to true to start drwaing
handDrawOverlay.setEditMode(true);
//Set edit mode to true to stop drwaing
handDrawOverlay.setEditMode(false);
Note
This is a full functioning example to help you starting. However, you should optimize the code to make it more efficient (i.e. using Path to store the drawing path in onDraw(), reducing the number of points recorded in onTouch(), etc.).
Enjoy it.
I want to draw lines on the screen but my application is drawing only dotted. So what should I add in my code?
List<Point> points = new ArrayList<Point>();
Paint paint = new Paint();
public DrawView(Context context) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
paint.setColor(Color.BLUE);
paint.setAntiAlias(true);
}
#Override
public void onDraw(Canvas canvas) {
for (Point point : points) {
canvas.drawCircle(point.x, point.y, 5, paint);
// Log.d(TAG, "Painting: "+point);
}
}
public boolean onTouch(View view, MotionEvent event) {
// if(event.getAction() != MotionEvent.ACTION_DOWN)
// return super.onTouchEvent(event);
Point point = new Point();
point.x = event.getX();
point.y = event.getY();
points.add(point);
invalidate();
Log.d(TAG, "point: " + point);
return true;
}
}
class Point
{
float x, y;
#Override
public String toString() {
return x + ", " + y;
}
}
Edit
Use drawLine or drawPath instead of drawCircle.
I would suggest you to take a look on the Fingerpaint example of the API Demos
Use drawLine bewteen 2 sets of points
For smoother lines, get all the historic events in onTouch and process them first
for faster/smoother, invalidate only the rect where points have changes
Read more here
I'm trying to draw multiple rectangles. I want to be able to draw each rectangle by hand though. I can draw one but then once I call invalidate(), of course, the canvas gets cleared.
Is there another way to call the onDraw() so that the canvas doesn't get cleared?
Here's what I have:
I simply have a class which extends a SurfaceView and then
Override the onDraw
#Override
protected void onDraw(Canvas canvas)
{
Paint paint = new Paint();
paint.setColor(Color.BLUE);
canvas.drawRect(xCoor, yCoor, rectW, rectH, paint);
}
And then I Override an OnTouchEvent
#Override
public boolean onTouchEvent (MotionEvent event)
{
downX = Math.round(event.getX());
downY = Math.round(event.getY());
invalidate(); //clears canvas which I don't want
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
xCoor = downX;
yCoor = downY;
rectH = 0;
rectW = 0;
break;
case MotionEvent.ACTION_MOVE:
rectH = downY;
rectW = downX;
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
Am I doing this completely wrong? :)
Any help would be appreciated.
Thanks!
You could add each rectangle to a list and iterate it onDraw like this:
import android.graphics.Rect;
private ArrayList<Rect> rectangles = new ArrayList<Rect>();
#Override
public boolean onTouchEvent (MotionEvent event) {
// ...
case MotionEvent.ACTION_UP:
rectangles.add(new Rect(xCoor, yCoor, rectW, rectH));
break;
// ...
}
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLUE);
for (Rect rect : rectangles) {
canvas.drawRect(rect, paint);
}
}