CODEWITHSUNDEEP
androidgraphicsandroid-canvasandroid-scrollview
asloob
asloob

Reputation: 1326

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

Upvotes: 1

Views: 6061

Answers (3)

Muhammad Bilal Liaquat
Muhammad Bilal Liaquat

Reputation: 33

@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
            }
        }
    }
}

Upvotes: 1

Quintin B
Quintin B

Reputation: 5880

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

Upvotes: 4

Raghav Sood
Raghav Sood

Reputation: 82583

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.

Upvotes: 1

Related Questions