How to Move a ShapeDrawable in Canvas on Touch Eve

2019-05-05 17:45发布

问题:

I am trying to implement a Drawing Application in Android. Where the user should be able to select and move the drawn shapes.
Currently i have statically drawn some rects and text on my Drawing Canvas:

        View mDrawingCanvas = new View(mContext) 
        {
            ShapeDrawable rectangle;
            @Override
            public boolean isFocused() {
                // TODO Auto-generated method stub
                Log.d(TAG, "View's On focused is called !");
                return super.isFocused();
            }

            @Override
            public boolean onTouchEvent(MotionEvent event) {
                // TODO Auto-generated method stub

                return super.onTouchEvent(event);
            }

            @Override
            protected void onDraw(final Canvas canvas) {
                super.onDraw(canvas);
                // Work out current total scale factor
                // from source to view

                final float scale = mSourceScale*(float)getWidth()/(float)mSize.x;

                Paint paint = new Paint();
                paint.setStyle(Paint.Style.FILL);
                paint.setColor(Color.WHITE);

                //Custom View
                rectangle = new ShapeDrawable(new RectShape());
                rectangle.getPaint().setColor(Color.GRAY);
                rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
                rectangle.getPaint().setStrokeWidth(3);
                rectangle.setBounds((int)(50*scale), (int)(30*scale), (int)(200*scale), (int)(150*scale));
                rectangle.draw(canvas);

                rectangle.getPaint().setColor(Color.BLUE);
                rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
                rectangle.getPaint().setStrokeWidth(3);
                rectangle.setBounds((int)(200*scale), (int)(200*scale), (int)(400*scale), (int)(350*scale));
                rectangle.draw(canvas);
            }
        };

I want to select (draw borders on the selected shape) and move the drawn Shapes in onTouch events of the drawing canvas.
Can some one please guide me about this, any help is Highly Appreciated.

回答1:

This answer has demonstrated the Shape Moving Methodology that i was looking for.
And my problem is solved now. The Link is :
Drag and move a circle drawn on canvas



回答2:

You should save the X and Y positions in the touch event and use them when drawing your shapes. Below is a very basic example of how to do this, but you need to improve it (check if the touch is inside the object and only change values for that object)

Example:

public class DrawTest extends View {

    private static final String TAG = "Desenho";

    private ShapeDrawable rectangle;
    private Paint paint;
    private float currX, currY;
    private Rect blue, gray;

    public DrawTest(Context context) {
        super(context);

        currX = 1;
        currY = 1;

        gray = new Rect(50,30,200,150);
        blue = new Rect(200,200,400,350);

        paint = new Paint();
        rectangle = new ShapeDrawable(new RectShape());
    }

    @Override
    public boolean isFocused() {
        Log.d(TAG, "View's On focused is called !");
        return super.isFocused();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        currX = event.getX();
        currY = event.getY();
        invalidate();
        Log.d(TAG, "View's On touch is called! X= "+currX + ", Y= "+currY);
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);

        //Custom View
        rectangle.getPaint().setColor(Color.GRAY);
        rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
        rectangle.getPaint().setStrokeWidth(3);
        gray.set((int)(50+currX), (int)(30+currY), (int)(200+currX), (int)(150+currY));
        rectangle.setBounds(gray);
        gray = rectangle.getBounds();
        rectangle.draw(canvas);

        rectangle.getPaint().setColor(Color.BLUE);
        rectangle.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
        rectangle.getPaint().setStrokeWidth(3);
        blue.set((int)(200+currX), (int)(200+currY), (int)(400+currX), (int)(350+currY));
        rectangle.setBounds(blue);
        blue = rectangle.getBounds();
        rectangle.draw(canvas);

    }

}