Question

i want to custom view,it can include some effect:first draw a pic on the view as a background then draw a rectangle on the image,and draw other image named A in the rectangle, we know the rectangle have four fixed point,when i drag one of these,the rectangle can scale,at the same time A also is scale, i have read more link,but not find good example,i have done something,but cannot finish the scale rectangle,my code is:

public class DrawView extends View implements OnTouchListener {
private static final String TAG = "DrawView";

private static final int LineLength = 30;

Paint paint = new Paint();
float locationX, locationY;
private int mLastTouchX;
private int mLastTouchY;

private int mPosX;
private int mPosY;

private int mPosX1;
private int mPosY1;
Bitmap bitmap, bmp, xiao;


int screenWidth, screenHeight;

int xLength;

boolean isFirst = true;
boolean isLeft = false;

Rect r, rBig,outRect;

public DrawView(Context context) {
    super(context);
    setFocusable(true);
    setFocusableInTouchMode(true);
    this.setOnTouchListener(this);

    WindowManager wm = (WindowManager) context
            .getSystemService(Context.WINDOW_SERVICE);
    screenHeight = wm.getDefaultDisplay().getHeight();
    screenWidth = wm.getDefaultDisplay().getWidth();
    mPosX = screenWidth / 2;
    mPosY = screenHeight / 2;

    paint.setColor(Color.RED);
    paint.setAntiAlias(true);
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.meinv);
    bmp = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
    xiao = BitmapFactory.decodeResource(getResources(),
            R.drawable.msn_protocol);

    xLength = (int) Math.hypot(xiao.getWidth(), xiao.getHeight());

    r = new Rect();
    r.set((int) mPosX - LineLength - xiao.getWidth(), (int) mPosY
            - LineLength - xiao.getHeight(), (int) mPosX - LineLength,
            (int) mPosY - LineLength);

//  Log.i("r", r.left + " " + r.top + " " + r.right + " " + r.bottom);
    rBig = new Rect();
    rBig.set((int) mPosX - LineLength, (int) mPosY - LineLength,
            (int) mPosX + LineLength, (int) mPosY + LineLength);
    //Log.i("r", rBig.left + " " + rBig.top + " " + rBig.right + " " + rBig.bottom);



}

@Override
public void onDraw(Canvas canvas) {



    canvas.drawBitmap(bitmap, 0, 0, null);

    canvas.drawBitmap(xiao, mPosX - LineLength - xiao.getWidth(), mPosY
            - LineLength - xiao.getHeight(), null);


    canvas.drawLine(mPosX - LineLength,
            mPosY - LineLength - xiao.getHeight() / 2, mPosX + LineLength,
            mPosY - LineLength - xiao.getHeight() / 2, paint);


    canvas.drawLine(mPosX - LineLength - xiao.getWidth() / 2, mPosY
            - LineLength, mPosX - LineLength - xiao.getWidth() / 2, mPosY
            + LineLength, paint);


    canvas.drawBitmap(xiao, mPosX + LineLength,
            mPosY - LineLength - xiao.getHeight(), null);


    canvas.drawBitmap(xiao, mPosX - LineLength - xiao.getWidth(), mPosY
            + LineLength, null);


    canvas.drawBitmap(xiao, mPosX + LineLength, mPosY + LineLength, null);


    canvas.drawLine(mPosX + LineLength + xiao.getWidth() / 2, mPosY
            - LineLength, mPosX + LineLength + xiao.getWidth() / 2, mPosY
            + LineLength, paint);


    canvas.drawLine(mPosX - LineLength,
            mPosY + LineLength + xiao.getHeight() / 2, mPosX + LineLength,
            mPosY + LineLength + xiao.getHeight() / 2, paint);


    if (isLeft) {



        Matrix matrix = new Matrix();
        matrix.preScale(0.8f, 0.8f);
        Bitmap rotatedBitmap = Bitmap.createBitmap(bmp, 0, 0,
                bmp.getWidth(), bmp.getHeight(), matrix, true);
        canvas.drawBitmap(rotatedBitmap, mPosX - LineLength, mPosY
                - LineLength, null);


    }

}

public boolean onTouch(View view, MotionEvent event) {

    isFirst = false;
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN: {
        mPosX1 = (int) event.getX();
        mPosY1 = (int) event.getY();
        mLastTouchX = mPosX1;
        mLastTouchY = mPosX1;


    //  Log.i("r", r.left + " " + r.top + " " + r.right + " " + r.bottom);
        Log.i("ACTION_DOWN", "" + mPosX1 + " " + mPosY1);
        if (r.contains(mPosX1, mPosY1)) {
            isLeft = true;

            invalidate();
        } 

        break;
    }

    case MotionEvent.ACTION_MOVE: {

         int x = (int) event.getX();
         int y = (int) event.getY();
         Log.i("aa",""+x+""+y);




         int dx = x - mLastTouchX;
         int dy = y - mLastTouchY;

        mLastTouchX = x;
        mLastTouchY = y;

        mPosX += dx;
        mPosY += dy;

        r.set((int) mPosX - LineLength - xiao.getWidth(), (int) mPosY
                - LineLength - xiao.getHeight(), (int) mPosX - LineLength,
                (int) mPosY - LineLength);

        rBig.set((int) mPosX - LineLength, (int) mPosY - LineLength,
                (int) mPosX + LineLength, (int) mPosY + LineLength);

    //  Log.i("r", rBig.left + " " + rBig.top + " " + rBig.right + " " + rBig.bottom);
             invalidate(); 


        break;
    }

    case MotionEvent.ACTION_UP: {

        break;
    }

    case MotionEvent.ACTION_CANCEL: {

        break;
    }

    }
    return true;
}


       }

the pic as :https://i.stack.imgur.com/wxi35.png,the effect have finished by system gallery,but i debug the source ,i failed, as my other question: Imitate crop function of system Gallery
and https://stackoverflow.com/questions/6724218/i-cannot-find-the-initial-value-in-gallery-the-source

Answer 1

I dont know about drawing the Rectangle but, this is how I moved the image

MainPinchView.java

public class MainPinchView extends Activity {
int menuid = 0;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    MainPinchImageView obj = new MainPinchImageView(this);
    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.my);
    obj.setImage(bmp, 100, 100);
    setContentView(obj);
  }

}

MainPinchImageView.java

   public class MainPinchImageView extends ImageView {

    private static final String TAG = "Touch";
    // These matrices will be used to move and zoom image
    Matrix matrix = new Matrix();
    Matrix savedMatrix = new Matrix();

    int flag = 0;

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;

    // Remember some things for zooming
    PointF start = new PointF();
    PointF mid = new PointF();
    float oldDist = 1f;

    Context context;

    public MainPinchImageView(Context context) {
        super(context);
        super.setClickable(true);
        this.context = context;

        matrix.setTranslate(1f, 1f);
        setImageMatrix(matrix);      // sets the default matrix 
        setScaleType(ScaleType.MATRIX); //Controls how the image should be resized or moved to match the size of this ImageView.

        setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // Handle touch events here...
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    savedMatrix.set(matrix); // 
                    start.set(event.getX(), event.getY());
                    Log.d(TAG, "mode=DRAG");
                    mode = DRAG;
                    break;

                case MotionEvent.ACTION_MOVE:

                    if (mode == DRAG) {
                        // ...
                        matrix.set(savedMatrix);
                        matrix.postTranslate(event.getX() - start.x, event.getY()- start.y);
                    } 
                    break;
                }
                setImageMatrix(matrix);
                return true; // indicate event was handled
            }
        });
    }

    public void setImage(Bitmap bm, int displayWidth, int displayHeight) {
        super.setImageBitmap(bm);

        int displayheight = (getResources().getDisplayMetrics().heightPixels)/2;
        int displaywidth = (getResources().getDisplayMetrics().widthPixels)/2;

        int imgw = displayWidth/2;
        int imgh = displayHeight/2;




        // Fit to screen.
        float scale;
        if ((displayHeight / bm.getHeight()) >= (displayWidth / bm.getWidth())) {
            scale = (float) displayWidth / (float) bm.getWidth();
        } else {
            scale = (float) displayHeight / (float) bm.getHeight();
        }

        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postScale(scale, scale, mid.x, mid.y);
        setImageMatrix(matrix);

        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postTranslate(displaywidth - imgw, displayheight - imgh);

        setImageMatrix(matrix);
    }
}