anyone knows how to zoom paint view with image correctly?

Tutorials concerning the OpenGL® ES cross-platform API for full-function 2D and 3D graphics on the Google-Android platform.

anyone knows how to zoom paint view with image correctly?

Postby choijuho » Thu Apr 07, 2011 9:19 am

Hi. anyone knows how to zoom paint view with image correctly?

At following code, I used canvas zoom in order to zoom paint view with image including using setImageMatrix().
But problem arised, that is entire screen became to zoom in/out but not paint view and image only.
So If anyone knows this issue, reply plz.


PaintScreen.java

public class PaintScreen extends Activity implements ColorPickerDialog.OnColorChangedListener{

Context mContext;
private Paint mPaint;
MaskFilter mEmboss;
MaskFilter mBlur;
private ImageView mImageView;
private LinearLayout mPaintBaseLayout;
private FrameLayout mTouchBaseLayout;
private PaintView mPaintView;
private int[] mPixels;
private Bitmap mBitmapImage;

private DisplayMetrics mDisplayMetrics = new DisplayMetrics();
MultiTouchListener multiTouchLitener = new MultiTouchListener(this);

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

private int WIDTH = 0;
private int HEIGHT = 1;

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

// Remember some things for zooming
PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;
float newDist;
float distanceOffset = 50f;
float minOffset = 50f;
float maxOffset = 10000f;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.paint_mode1_paint);

this.initialize();

this.PaintSet();
}

private void initialize()
{
mPaintBaseLayout = (LinearLayout) findViewById(R.id.paint_paint_base_layout);
mTouchBaseLayout = (FrameLayout) findViewById(R.id.paint_touch_base_layout);

mContext = this;
mPaint = new Paint();
mPaintView = new PaintView(mContext);
mPaintView.setBackgroundColor(Color.TRANSPARENT);
mPaintBaseLayout.addView(mPaintView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
mPaintBaseLayout.setBackgroundColor(Color.TRANSPARENT);

mPaintView.setScaleType(ScaleType.MATRIX);
mPaintView.setMPaint(mPaint);

Intent intent = getIntent();
Bundle itstr = intent.getExtras();
String imagePath = itstr.getString("image_path");

Drawable d = Drawable.createFromPath(imagePath);

mPaintView.setBackgroundDrawable(d);

mPaintView.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
dumpEvent(event);
PaintView view = (PaintView) v;

switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
start.set(event.getX(), event.getY());
savedMatrix.set(matrix);
midPoint(mid, event);
mode = POINT2;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
distanceOffset = minOffset;
break;
case MotionEvent.ACTION_MOVE:
if (mode == POINT2)
{
newDist = spacing(event);
if (newDist - oldDist > 5f
|| newDist - oldDist < -5f) {
mode = ZOOM;
} else {
start.set(event.getX(), event.getY());
mode = DRAG;

}
} else
if (mode == DRAG) {
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x,
event.getY() - start.y);


}
else if (mode == ZOOM) {
newDist = spacing(event);
if (newDist > 10f) {

matrix.set(savedMatrix);
float scale = newDist / oldDist;
matrix.postScale(scale, scale, mid.x, mid.y);


}
} else {

view.onTouchEvent(event);
}
break;

}

matrixTurning(matrix, view);
view.setImageMatrix(matrix);
view.cMatrix(matrix);
return true;
}
});
}

/** Show an event in the LogCat view, for debugging */
private static void dumpEvent(MotionEvent event) {
String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
"POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
StringBuilder sb = new StringBuilder();
int action = event.getAction();
int actionCode = action & MotionEvent.ACTION_MASK;
sb.append("event ACTION_").append(names[actionCode]);
if (actionCode == MotionEvent.ACTION_POINTER_DOWN
|| actionCode == MotionEvent.ACTION_POINTER_UP) {
sb.append("(pid ").append(
action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
sb.append(")");
}
sb.append("[");
for (int i = 0; i < event.getPointerCount(); i++) {
sb.append("#").append(i);
sb.append("(pid ").append(event.getPointerId(i));
sb.append(")=").append((int) event.getX(i));
sb.append(",").append((int) event.getY(i));
if (i + 1 < event.getPointerCount())
sb.append(";");
}
sb.append("]");
Log.d(TAG, sb.toString());
}

/** Determine the space between the first two fingers */
private static float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}

/** Calculate the mid point of the first two fingers */
private static void midPoint(PointF point, MotionEvent event) {
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}

private void matrixTurning(Matrix matrix, ImageView view){

float[] value = new float[9];
matrix.getValues(value);
float[] savedValue = new float[9];
savedMatrix2.getValues(savedValue);

// view size
int width = view.getWidth();
int height = view.getHeight();

//image size
Drawable d = view.getDrawable();
if(d == null) return;
int imageWidth = d.getIntrinsicWidth();
int imageHeight = d.getIntrinsicHeight();
int scaleWidth = (int)(imageWidth*value[0]);
int scaleHeight = (int)(imageHeight*value[0]);


if(value[2] < width - scaleWidth) value[2] = width - scaleWidth;
if(value[5] < height - scaleHeight) value[5] = height - scaleHeight;
if(value[2] > 0) value[2] = 0;
if(value[5] > 0) value[5] = 0;

if(value[0] > 10 || value[4] > 10){
value[0] = savedValue[0];
value[4] = savedValue[4];
value[2] = savedValue[2];
value[5] = savedValue[5];
}

if(imageWidth > width || imageHeight > height){

if(scaleWidth < width && scaleHeight < height){
int target = WIDTH;

if(imageWidth < imageHeight) target = HEIGHT;

if(target == WIDTH) value[0] = value[4] = (float)width/imageWidth;
if(target == HEIGHT) value[0] = value[4] = (float)height/imageHeight;


scaleWidth = (int)(imageWidth*value[0]);
scaleHeight = (int)(imageHeight*value[4]);

if(scaleWidth == width) value[0] = value[4] = (float)width/imageWidth;
if(scaleHeight == height) value[0] = value[4] = (float)height/imageHeight;
}


}else{
if(value[0] < 1) value[0] = 1;
if(value[4] < 1) value[4] = 1;
}



scaleWidth = (int)(imageWidth*value[0]);
scaleHeight = (int)(imageHeight*value[4]);

if(scaleWidth < width){
value[2] = (float)width/2-(float)scaleWidth/2;
}
if(scaleHeight < height){
value[5] = (float)height/2-(float)scaleHeight/2;
}


matrix.setValues(value);
savedMatrix2.set(matrix);


}

public void PaintSet(){

mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(24);

getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);
mEmboss = new EmbossMaskFilter(new float[] { 1, 1, 1 }, 0.4f, 6, 3.5f);
mBlur = new BlurMaskFilter(24, BlurMaskFilter.Blur.NORMAL);
}

public void colorChanged(int color) {
mPaint.setColor(color);
}
}


PaintView.java

public class PaintView extends ImageView {

private Context mContext;

private static final float MINP = 0.25f;
private static final float MAXP = 0.75f;

private Bitmap mBitmap;
private Bitmap testBitmap;
private Canvas mCanvas;
private Canvas tCanvas;
private Path mPath;
private Paint mBitmapPaint;

// onDraw
private Paint mPaint;
private MaskFilter mEmboss;
private MaskFilter mBlur;

// onTouch
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;


public PaintView(Context context) {
this(context, null);
// TODO Auto-generated constructor stub
}

public PaintView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
mContext = context;

mBitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
//mCanvas = new Canvas(mBitmap);
mPath = new Path();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}

@Override
protected void onDraw(Canvas canvas) {
//canvas.drawColor(0xFFAAAAAA);
super.onDraw(canvas);
mCanvas = canvas;
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

canvas.drawPath(mPath, mPaint);

}

public void setMPaint(Paint paint) {
mPaint = paint;
}

private void touchStart(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}

private void touchMove(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
}

private void touchUp() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
// kill this so we don't double draw
mPath.reset();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();

Log.d("PaintView", "ev ->" + event.getAction());

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchStart(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touchMove(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touchUp();
invalidate();
break;
}
return true;
}

public void cMatrix(Matrix matrix) {
mCanvas.setMatrix(matrix);
}

}
choijuho
Freshman
Freshman
 
Posts: 2
Joined: Fri Apr 16, 2010 4:17 am
Location: Seoul, Korea

Top

Return to Android 2D/3D Graphics - OpenGL Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest