CODEWITHSUNDEEP
android
Jayson Tamayo
Jayson Tamayo

Reputation: 2809

How to Draw Line in Android by Dragging

I am creating a coaching board. I aim to draw a line between two points. Initial position is in the image below: enter image description here

If I drag the chip away from the initial position, it should draw a line. When I move the chip, it should always draw a line.

This is what I tried:

case MotionEvent.ACTION_UP:
            Toast.makeText(this, "here", Toast.LENGTH_SHORT).show();
            Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
                    .getDefaultDisplay().getWidth(), (int) getWindowManager()
                    .getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            Paint paint = new Paint();
            paint.setColor(Color.BLACK);
            paint.setStrokeWidth(10);
            int startx = 50;
            int starty = 100;
            int endx = 150;
            int endy = 210;
            canvas.drawLine(startx, starty, endx, endy, paint);
            break;

I put that code inside the ontouchlistener of the chip. You can download the project here: https://www.dropbox.com/s/ggfbsbkaokj9vxi/CoachingBoard.rar?dl=0

Upvotes: 0

Views: 3096

Answers (2)

asadullah
asadullah

Reputation: 111

the best solution to draw a line by dragging is to get x and y positions from ACTION_DOWN and then get ever next x and y position from ACTION_MOVE, outside the switch statement, invalidate the canvas. draw the line with this starting x,y and ending x,y positions.

Code of these all explanation is below:

public class TouchEventView extends View {
float downxpos;
float downypos;
float upxpos;
float upypos;
private Paint paint = new Paint();
private Path path = new Path()
public TouchEventView(Context context, AttributeSet attrs) {
    super(context, attrs);
    paint.setColor(Color.GREEN);       
}

@Override
protected void onDraw(Canvas canvas) {
        canvas.drawLine(downxpos, downypos, upxpos, upypos, paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downxpos = event.getX();
            downypos = event.getY();
        case MotionEvent.ACTION_MOVE:
            upxpos = event.getX();
            upypos = event.getY();
            break;
        default:
            return false;
    }
    invalidate();
    return true;
}

}

hope this will help you and other community if you need more description feel free to ask.

Upvotes: 0

MeetTitan
MeetTitan

Reputation: 3568

After further examining your code, I believe I have achieved what you'd like.

We're going to go to DrawingView and define a getter for drawCanvas, so we can access our canvas outside of the DrawingView class.

Next we're going to head to Basketball and do the following:

float startX;
float startY;
public boolean onTouch(View view, MotionEvent event) {
    switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = event.getRawX();
            startY = event.getRawY();
            ...
            break;

        case MotionEvent.ACTION_UP:
            Paint paint = new Paint(); //set this as a field in drawView with another getter to avoid garbage collection penalties
            paint.setStrokeWidth(15f);
            paint.setColor(Color.BLACK);
            drawView.getCanvas().drawLine(startX, startY, event.getRawX(), event.getRawY(), paint);
            drawView.invalidate();
            break;
    }
}

What this does: when you pick up the chip it will save the starting coordinates, and when you drop the chip it will draw a line in your drawView canvas from start to end.

You can even draw the lines as a continuous Path so the lines always touch, but that is outside the context of this answer.

Upvotes: 1

Related Questions