1

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

Community
  • 1
  • 1
asloob
  • 1,308
  • 20
  • 34

3 Answers3

4

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

Quintin Balsdon
  • 5,484
  • 10
  • 54
  • 95
  • I am using SurfaceView, can't override ScaleGestureDetector. Any workaround for that? – asloob Jul 09 '12 at 15:57
  • That is going to present more problems - I was using SurfaceView this weekend and you can't draw on a surface view. You would have to make an overlay View and then put them both in a FrameLayout.(http://stackoverflow.com/questions/2933882/how-to-draw-an-overlay-on-a-surfaceview-used-by-camera-on-android) Although, when I looked further just now - I did find this: http://android-coding.blogspot.com/2011/05/drawing-on-surfaceview.html but as for panning and zooming I am not sure if it will help. I still think the best method is the overlay method. – Quintin Balsdon Jul 10 '12 at 07:18
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.

Community
  • 1
  • 1
Raghav Sood
  • 81,899
  • 22
  • 187
  • 195
  • I know this is an old post, but I wondered if you might be willing to take a look at the related question at this link: stackoverflow.com/questions/16392717/how-to-create-a-pinch-zoomable-scrollable-gridview-for-a-strategy-game. Thanks very much if you can help. – Rookatu May 27 '13 at 22:38
1
@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
            }
        }
    }
}
Muhammad Bilal Liaquat
  • 33
  • 7