Zoom on a Canvas (self created Bitmap)

Problems with Canvas, OpenGL, etc...

Zoom on a Canvas (self created Bitmap)

Postby outi » Thu May 05, 2011 1:44 pm

Hello there,

I would like to zoom and pan in a canvas with multi touching. But I don't know what currently the problem is...

The situation:
Currently I paint a line of x, y values. I have an activity-class and a sub-class which paints the values. This sub-class extends ImageView. Until then everything works fine...

The next step is, to zoom in this "graph" with multi touching. The reference for this is: http://www.zdnet.com/blog/burnette/how- ... in;content

I used the method

Code: Select all
    this.setImageBitmap(mBitmap);


to get the Bitmap as the content of the ImageView to use the MultiTouch zoom on that ImageView...

My code snippet:

Code: Select all
    public class GraphPaint extends Activity implements OnTouchListener {
       
            //Variables
            //...

       @Override
       protected void onCreate(Bundle savedInstanceState){
          super.onCreate(savedInstanceState);
         
          FrameLayout layout = new FrameLayout(this);
         
          currentIntent = this.getIntent();
         
          time = currentIntent.getFloatArrayExtra("Time");
          data = currentIntent.getFloatArrayExtra("Z-Axis");
         
          Tools tools = new Tools(this);
          displayWidth = tools.getDisplayResolution()[0];
         
         
          gv = new GraphView(this);   
         
          gv.setOnTouchListener(this);
         
          layout.addView(gv);
         
          setContentView(layout);
       }


            public boolean onTouch(View v, MotionEvent event) {
          try{
             ImageView view = (ImageView)v;
                         
             switch (event.getAction() & MotionEvent.ACTION_MASK) {
             case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
               
                start.set(event.getX(), event.getY());
                mode = DRAG;
                break;
               
             case MotionEvent.ACTION_UP:
             case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
             case MotionEvent.ACTION_MOVE:
                if(mode == DRAG){
                   matrix.set(savedMatrix);
                   matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
                }else if(mode == ZOOM){
                    float newDist = spacing(event);
                    if (newDist > 10f) {
                         matrix.set(savedMatrix);
                         float scale = newDist / oldDist;
                         matrix.postScale(scale, scale, mid.x, mid.y);
                      }
                }
                break;
             case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
               
                if(oldDist > 10f){
                   savedMatrix.set(matrix);
                   midPoint(mid, event);
                   mode = ZOOM;
                }
                break;
             }
             
              // Perform the transformation
              view.setImageMatrix(matrix);
             
             /*double[] range = new double[4];
             
             double x0 = event.getX(0);
             double y0 = event.getY(0);
             range[0] = x0;
             range[1] = y0;
             
             int action = event.getAction();
             int actionCode = action & MotionEvent.ACTION_MASK;
             
             double x1, y1;
             
             if(actionCode == MotionEvent.ACTION_POINTER_DOWN){
                x1 = event.getX(1);
                y1 = event.getY(1);
                range[2] = x1;
                range[3] = y1;
             }
             */
          }catch(Exception ex){
          }
          return true;
       }

            private class GraphView extends ImageView {

          Paint mPaint, mBitmapPaint;
          Bitmap mBitmap;
          Canvas mCanvas;
         
          Path graphPath = new Path();   
         
          public GraphView(Context context){
             super(context);
         
             mPaint = new Paint();
             mPaint.setAntiAlias(true);
             mPaint.setDither(true);
             mPaint.setColor(0xFFFF0000);
             mPaint.setStyle(Paint.Style.STROKE);
             mPaint.setStrokeJoin(Paint.Join.ROUND);
             mPaint.setStrokeCap(Paint.Cap.SQUARE);
             mPaint.setStrokeWidth(1);

             mBitmap = Bitmap.createBitmap(displayWidth, 200,
                   Bitmap.Config.ARGB_8888);
             mCanvas = new Canvas(mBitmap);
             mBitmapPaint = new Paint(Paint.DITHER_FLAG);     
             
             this.setImageBitmap(mBitmap);
             //this.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
             this.setScaleType(ScaleType.MATRIX);
             
             float delta = (float)((float)displayWidth/(float)data.length);
             
             int ychartline = 250;
             float lastX = 0;
             float lastY_x = ychartline + GlobalVariables.scaleValue * data[0];
             float curX = delta;
             for (int i = 0; i < data.length; i++) {
                graphPath.quadTo(lastX, lastY_x, curX, ychartline
                      + GlobalVariables.scaleValue
                      * data[i]);
                lastX = curX;
                lastY_x = ychartline + GlobalVariables.scaleValue
                      * data[i];
                curX += delta;
             }
          }     

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

             invalidate();
          }
               
          @Override
          protected void onDraw(Canvas canvas) {
             try {
                synchronized (this) {
                   if (mBitmap != null) {
                      canvas.drawColor(0xFFAAAAAA);
                      canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
                     
             
                      final Paint paint = mPaint;
             
                      mPaint.setStyle(Style.STROKE);
                      mPaint.setColor(Color.BLACK);
                         
                      canvas.drawPath(graphPath, mPaint);
                     
                      invalidate();               
                   }
                }
             } catch (Exception ex) {

             }
          }
         

       }
       
    }




Thank you.
outi
Freshman
Freshman
 
Posts: 3
Joined: Tue Jan 04, 2011 6:53 pm

Top

Re: Zoom on a Canvas (self created Bitmap)

Postby nookie1988 » Thu May 12, 2011 12:13 pm

so you want to now how pitch2zoom work???
nookie1988
Junior Developer
Junior Developer
 
Posts: 24
Joined: Mon May 24, 2010 6:53 pm

Top

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

Who is online

Users browsing this forum: No registered users and 3 guests