Search code examples
androidgraphicsandroid-canvasandroid-scrollview

How to draw on canvas greater than screen size and be able to scroll / pan horizontally and vertically in android?


I am looking for a real example with sample code on how to draw on canvas greater than screen size ( As of now I am drawing normally and not able to view outside screen size). More stress is on being able to scroll / pan the screen to view the whole canvas. If anymore info is required please comment.

Update: Found my answer here Image in Canvas with touch events


Solution

  • My version is converted from Monodroid, but the implementation should look about the same. (I tried putting it back into java, apologies if it is not exact)

    1. In order to draw outside the screen, just draw where ever you want, it will be drawn outside the screen. The trick is to see it by zooming and panning. For zooming your view needs to implement ScaleGestureDetector.IOnScaleGestureListener and implement the onScale method as below.

    2. For panning you just need to implement the onTouchEvent, which is required for zooming anyway.

      private float _scaleFactor;
      private float _xoffset;
      private float _yoffset;
      
      @override
      public bool onScale(ScaleGestureDetector detector){
          _scaleFactor *= detector.ScaleFactor;
          _scaleFactor = Math.Max(0.1f, Math.Min(_scaleFactor, 5.0f));
          invalidate();
          return true;
      } 
      
      @override 
      protected void onDraw(Canvas canvas){
          super.onDraw(canvas);
          canvas.save();
          canvas.scale(_scaleFactor, _scaleFactor);//for zoom
          canvas.translate(_xoffset, _yoffset);//for pan
          //DO NORMAL DRAWING HERE
          canvas.restore();
      }
      
      @override 
      public bool onTouchEvent(MotionEvent e){
          switch (e.action){
              case MotionEvent.ACTION_DOWN:{                        
                  _prevx = e.getX();
                  _prevy = e.getY();
              }
              break;
              case MotionEvent.ACTION_UP:{
                  _xoffset += e.getX() - _prevx;
                  _yoffset += e.getY() - _prevy;
                  invalidate();
      
                  _prevx = e.getX();
                  _prevy = e.getY();
              }
              break;
          }
          return _scaleGestureDetector.onTouchEvent(e);
      }
      

    NOTE: This code is for a custom VIEW object - so inherit from View and implement IOnScaleGestureListener