如何在触摸事件中使视图可调整大小

时间:2012-04-17 09:19:32

标签: android android-canvas android-imageview

enter image description here

见下图

我想通过拖动它的角来改变突出显示视图的形状..拖动角落后的视图应该是矩形的,它可以是任意的任意形状

如何实现这个?

现在我已经完成了触摸事件中可移动的4个角落,但形状没有改变

package com.assignment.DragDrop;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class DrawView extends View {


    Point point1,point2,point3,point4;
    private ColorBall[] colorballs = new ColorBall[4]; // array that holds the balls
    private int balID = 0; // variable to know what ball is being dragged
    Paint paint;
    Canvas canvas;
    public DrawView(Context context) {
        super(context);
         paint=new Paint();
        setFocusable(true); //necessary for getting the touch events
        canvas= new Canvas();
        // setting the start point for the balls
        point1 = new Point();
        point1.x = 50;
        point1.y = 20;

        point2 = new Point();
        point2.x = 150;
        point2.y = 20;

        point3 = new Point();
        point3.x = 150;
        point3.y = 120;

        point4 = new Point();
        point4.x = 50;
        point4.y = 120;


        // declare each ball with the ColorBall class
        colorballs[0] = new ColorBall(context,R.drawable.bol_blauw, point1);
        colorballs[1] = new ColorBall(context,R.drawable.bol_blauw, point2);
        colorballs[2] = new ColorBall(context,R.drawable.bol_groen, point3);
        colorballs[3] = new ColorBall(context,R.drawable.bol_geel, point4);


    }

    // the method that draws the balls
    @Override protected void onDraw(Canvas canvas) {
        //canvas.drawColor(0xFFCCCCCC);     //if you want another background color       

        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeJoin(Paint.Join.ROUND);
       // mPaint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeWidth(5);


          canvas.drawPaint(paint);
          paint.setColor(Color.WHITE);

          canvas.drawRect(point1.x+25, point2.x, point3.x+25, point4.x, paint);
          BitmapDrawable mBitmap;
          mBitmap= new BitmapDrawable();

        //  canvas.drawBitmap(bitmap, left, top, paint)
        // shade_region_between_points();
         // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint);
        //  canvas.drawLine(point1.x, point1.y, point4.x, point4.y, paint);

        //  canvas.drawLine(point4.x, point4.y, point3.x, point3.y, paint);
        // canvas.drawLine(point2.x, point2.y, point3.x, point3.y, paint);
          //draw the balls on the canvas
        for (ColorBall ball : colorballs) {
            canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(), paint);
             // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint);

    //  canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint);



        }
        /*Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
        drawable.setBounds( point1.x+25, point2.x, point3.x+25, point4.x);
        drawable.draw(canvas);*/
    }

    // events when touching the screen
    public boolean onTouchEvent(MotionEvent event) {
        int eventaction = event.getAction(); 

        int X = (int)event.getX(); 
        int Y = (int)event.getY(); 

        switch (eventaction ) { 

        case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on a ball
            balID = 0;
            for (ColorBall ball : colorballs) {
                // check if inside the bounds of the ball (circle)
                // get the center for the ball
                int centerX = ball.getX() + 25;
                int centerY = ball.getY() + 25;
                paint.setColor(Color.CYAN);
                // calculate the radius from the touch to the center of the ball
                double radCircle  = Math.sqrt( (double) (((centerX-X)*(centerX-X)) + (centerY-Y)*(centerY-Y)));
                //  canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint);

                // if the radius is smaller then 23 (radius of a ball is 22), then it must be on the ball
                if (radCircle < 23){

                    balID = ball.getID();
                    canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint);

                    invalidate(); 
                    break;
                }
                invalidate(); 

                //canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint);
                // check all the bounds of the ball (square)
                //if (X > ball.getX() && X < ball.getX()+50 && Y > ball.getY() && Y < ball.getY()+50){
                //  balID = ball.getID();
                //  break;
                //}
            }

            break; 


        case MotionEvent.ACTION_MOVE:   // touch drag with the ball
            // move the balls the same as the finger
            if (balID > 0) {
            try {
                colorballs[balID-1].setX(X-25);
                    colorballs[balID-1].setY(Y-25);
                     // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint);

            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            paint.setColor(Color.CYAN);
            canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint);
            invalidate(); 
            }

            break; 

        case MotionEvent.ACTION_UP: 
            // touch drop - just do things here after dropping

            break; 
        } 
        // redraw the canvas
        invalidate(); 
        return true; 

    }


    public void shade_region_between_points()
    {
        canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint);
    }
}

我从互联网上获取此代码。

这可以在触摸事件上移动角落,但形状不会移动......

2 个答案:

答案 0 :(得分:1)

以下代码是在触摸基座上绘制矩形。

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import com.common.Utils;
import com.example.rectangleoverlay.R;

public class DrawView extends View {

    Point point1, point3;
    Point point2, point4;

    /**
     * point1 and point 3 are of same group and same as point 2 and point4
     */
    int groupId = -1;
    private ArrayList<ColorBall> colorballs = new ArrayList<ColorBall>();
    // array that holds the balls
    private int balID = 0;
    // variable to know what ball is being dragged
    Paint paint;
    Canvas canvas;

    public DrawView(Context context) {
        super(context);
        paint = new Paint();
        setFocusable(true); // necessary for getting the touch events
        canvas = new Canvas();
        // setting the start point for the balls
        point1 = new Point();
        point1.x = 50;
        point1.y = 20;

        point2 = new Point();
        point2.x = 150;
        point2.y = 20;

        point3 = new Point();
        point3.x = 150;
        point3.y = 120;

        point4 = new Point();
        point4.x = 50;
        point4.y = 120;

        // declare each ball with the ColorBall class
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point1));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point2));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point3));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point4));

    }

    public DrawView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        setFocusable(true); // necessary for getting the touch events
        canvas = new Canvas();
        // setting the start point for the balls
        point1 = new Point();
        point1.x = 50;
        point1.y = 20;

        point2 = new Point();
        point2.x = 150;
        point2.y = 20;

        point3 = new Point();
        point3.x = 150;
        point3.y = 120;

        point4 = new Point();
        point4.x = 50;
        point4.y = 120;

        // declare each ball with the ColorBall class
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point1));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point2));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point3));
        colorballs.add(new ColorBall(context, R.drawable.gray_circle, point4));

    }

    // the method that draws the balls
    @Override
    protected void onDraw(Canvas canvas) {
        // canvas.drawColor(0xFFCCCCCC); //if you want another background color

        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(Color.parseColor("#55000000"));
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeJoin(Paint.Join.ROUND);
        // mPaint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeWidth(5);

        canvas.drawPaint(paint);
        paint.setColor(Color.parseColor("#55FFFFFF"));

        if (groupId == 1) {
            canvas.drawRect(point1.x + colorballs.get(0).getWidthOfBall() / 2,
                    point3.y + colorballs.get(2).getWidthOfBall() / 2, point3.x
                            + colorballs.get(2).getWidthOfBall() / 2, point1.y
                            + colorballs.get(0).getWidthOfBall() / 2, paint);
        } else {
            canvas.drawRect(point2.x + colorballs.get(1).getWidthOfBall() / 2,
                    point4.y + colorballs.get(3).getWidthOfBall() / 2, point4.x
                            + colorballs.get(3).getWidthOfBall() / 2, point2.y
                            + colorballs.get(1).getWidthOfBall() / 2, paint);
        }
        BitmapDrawable mBitmap;
        mBitmap = new BitmapDrawable();

        // draw the balls on the canvas
        for (ColorBall ball : colorballs) {
            canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(),
                    new Paint());

        }
    }

    // events when touching the screen
    public boolean onTouchEvent(MotionEvent event) {
        int eventaction = event.getAction();

        int X = (int) event.getX();
        int Y = (int) event.getY();

        switch (eventaction) {

        case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on
                                        // a ball
            balID = -1;
            groupId = -1;
            for (ColorBall ball : colorballs) {
                // check if inside the bounds of the ball (circle)
                // get the center for the ball
                Utils.logd("Id : " + ball.getID());
                Utils.logd("getX : " + ball.getX() + " getY() : " + ball.getY());
                int centerX = ball.getX() + ball.getWidthOfBall();
                int centerY = ball.getY() + ball.getHeightOfBall();
                paint.setColor(Color.CYAN);
                // calculate the radius from the touch to the center of the ball
                double radCircle = Math
                        .sqrt((double) (((centerX - X) * (centerX - X)) + (centerY - Y)
                                * (centerY - Y)));

                Utils.logd("X : " + X + " Y : " + Y + " centerX : " + centerX
                        + " CenterY : " + centerY + " radCircle : " + radCircle);

                if (radCircle < ball.getWidthOfBall()) {

                    balID = ball.getID();
                    Utils.logd("Selected ball : " + balID);
                    if (balID == 1 || balID == 3) {
                        groupId = 2;
                        canvas.drawRect(point1.x, point3.y, point3.x, point1.y,
                                paint);
                    } else {
                        groupId = 1;
                        canvas.drawRect(point2.x, point4.y, point4.x, point2.y,
                                paint);
                    }
                    invalidate();
                    break;
                }
                invalidate();
            }

            break;

        case MotionEvent.ACTION_MOVE: // touch drag with the ball
            // move the balls the same as the finger
            if (balID > -1) {
                Utils.logd("Moving Ball : " + balID);

                colorballs.get(balID).setX(X);
                colorballs.get(balID).setY(Y);

                paint.setColor(Color.CYAN);

                if (groupId == 1) {
                    colorballs.get(1).setX(colorballs.get(0).getX());
                    colorballs.get(1).setY(colorballs.get(2).getY());
                    colorballs.get(3).setX(colorballs.get(2).getX());
                    colorballs.get(3).setY(colorballs.get(0).getY());
                    canvas.drawRect(point1.x, point3.y, point3.x, point1.y,
                            paint);
                } else {
                    colorballs.get(0).setX(colorballs.get(1).getX());
                    colorballs.get(0).setY(colorballs.get(3).getY());
                    colorballs.get(2).setX(colorballs.get(3).getX());
                    colorballs.get(2).setY(colorballs.get(1).getY());
                    canvas.drawRect(point2.x, point4.y, point4.x, point2.y,
                            paint);
                }

                invalidate();
            }

            break;

        case MotionEvent.ACTION_UP:
            // touch drop - just do things here after dropping

            break;
        }
        // redraw the canvas
        invalidate();
        return true;

    }

    public void shade_region_between_points() {
        canvas.drawRect(point1.x, point3.y, point3.x, point1.y, paint);
    }
}

以下课程用于存储对象

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;

public class ColorBall {

    Bitmap bitmap;
    Context mContext;
    Point point;
    int id;
    static int count = 0;

    public ColorBall(Context context, int resourceId, Point point) {
        this.id = count++;
        bitmap = BitmapFactory.decodeResource(context.getResources(),
                resourceId);
        mContext = context;
        this.point = point;
    }

    public int getWidthOfBall() {
        return bitmap.getWidth();
    }

    public int getHeightOfBall() {
        return bitmap.getHeight();
    }

    public Bitmap getBitmap() {
        return bitmap;
    }

    public int getX() {
        return point.x;
    }

    public int getY() {
        return point.y;
    }

    public int getID() {
        return id;
    }

    public void setX(int x) {
        point.x = x;
    }

    public void setY(int y) {
        point.y = y;
    }
}

答案 1 :(得分:0)

就像我们裁剪图片一样,它会增加矩形的大小。然后我们可以将视图保存为新的位图。所以你可以从this question获得帮助。

这解释了你所要求的几乎相同的东西。

如果是布局,那么当我们触摸任何视图时,我们可以设置新的高度和宽度的布局 - 参数