How to draw on canvas greater than screen size and

Question

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

Answer 1

You can simply put the entire canvas inside of a ScrollView. This way, Android takes care of all of the scrolling for you. However, if you want to be able to have the user interact with the Canvas other than the scrolling, you will need to intercept some of the touch events from the ScrollView. An example of doing this can be found over here.

Answer 2

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

Answer 3

@Override
public void onCreate(Bundle savedInstanceState)
{
    CustomView customView;
    ScrollView scroll_view;
    HorizontalScrollView h_scroll_view;
    super.onCreate(savedInstanceState);
    scroll_view = new ScrollView(this);
    h_scroll_view = new HorizontalScrollView(this);
    customView = new CustomView(this);

    scroll_view.addView(customView);
    h_scroll_view.addView(scroll_view);
    setContentView(h_scroll_view);
}


public class CustomView extends View
{
    private Paint paint;
    Context app_context;

    public CustomView(Context context) {
        super(context);
        paint = new Paint();
        paint.setColor(Color.GRAY);
        app_context = context;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int width = 1000;
        int height = 1200;
        setMeasuredDimension(width, height);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
       // ToDo: Put drawing code in here
            }
        }
    }
}

Answer 4

My suggestion is to take a look at the AChartEngine source code, extract from there only the parts you need (a small subset of the model, renderer and chart packages, the tools package). It provides you all the stuff you need, the only issue is that it provides a lot more than that.

The source code is here.