canvas zoom in partially

Question

I want to zoom in the canvas board partially as the letter tray button will be fixed and the board will be zoom,
The partially coding is as mention below and the screen is fully draw in canvas which can be viewed as mention at the bottom.. please help and thanks for you concern.

        public class BoardView extends SurfaceView implements SurfaceHolder.Callback
                {
        class DrawingThread extends Thread implements OnTouchListener {

        public DrawingThread(SurfaceHolder holder, Handler handler) {
                    mSurfaceHolder = holder;

        public void setRunning(boolean b) {
                    mRun = b;
                }

                @Override
                public void run() {
                    while (mRun) {
                        Canvas c = null;
                        try {
                            c = mSurfaceHolder.lockCanvas(null);

        synchronized (mSurfaceHolder) {
                                // System.gc();
                                // c.scale(canvasScaleX, canvasScaleY);
                                // c.save();
                                // c.translate(canvasTranslateX, canvasTranslateY);
                                doDraw(c);
                            }

                            updateGame();
                        } finally {
                            if (c != null) {
                                mSurfaceHolder.unlockCanvasAndPost(c);
                            }
                        }
        }

        private void doDraw(Canvas canvas) {
                    if (ge == null)
                        return;

                        Rect bRect = new Rect(0, 0, dims.getTotalWidth(),
                        dims.getScoreHeight() + dims.getBoardheight());
                Drawable drawable = getResources().getDrawable(R.drawable.board);
                drawable.setBounds(bRect);

                drawable.draw(canvas);

                Rect tRect = new Rect(0, dims.getScoreHeight()
                        + dims.getBoardheight(), dims.getTotalWidth(),
                        dims.getTotalHeight());
                canvas.drawRect(tRect, fillTrayPaint);

                int topHeight = dims.getScoreHeight() + dims.getBoardheight();
                int bottom = (dims.getTotalHeight() + 5)
                        - (dims.getTotalWidth() / Tray.TRAY_SIZE);
                Rect rect = new Rect(0, topHeight, dims.getTotalWidth(), bottom - 7);
                Drawable drawableTray = getResources()
                        .getDrawable(R.drawable.strip);
                drawableTray.setBounds(rect);
                drawableTray.draw(canvas);
                        drawTray(canvas);
                drawBoard(canvas);

                // drawScore(canvas);
                drawMovingTile(canvas);
            }


public BoardView(Context context, AttributeSet attrs) {
        super(context, attrs);

        SurfaceHolder holder = getHolder();
        holder.addCallback(this);

        // endTurn=(ImageButton)findViewById(R.id.endturn_button_horizontal);
        thread = new DrawingThread(holder, handler);
    }
@Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        final float scale1 = getResources().getDisplayMetrics().density;
        defaultFontSize = (int) (MIN_FONT_DIPS * scale1 + 0.5f);
        thread.setDefaultFontSize(defaultFontSize);
        dimensions = calculateDimensions(getWidth(), getHeight());
        thread.setDimensions(dimensions);

        thread.setRunning(true);

        // if (thread != null && !thread.isAlive())
        thread.start();
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        boolean retry = true;
        thread.setRunning(false);
        while (retry) {
            try {
                thread.join();
                retry = false;
            } catch (InterruptedException e) {

            }
        }
    }

Answer 1

I believe the easiest way to do this would be to use Canvas#scale(float scale, int pivotx, int pivoty) method. It essentially grows the entire canvas uniformally which really is what zooming is from a 2D perspective.

canvas.scale(2.0f, getWidth()/2, getHeight()/2) will scale the image by 2 from the center. canvas.scale(1.0f, getWidth()/2, getHeight()/2) will shrink it back.

I have never tried this in this context, so if you decide to try it report back the results please! I'd like to know for future reference.

Answer 2

I think you need to render your game board into offscreen bitmap and then draw this bitmap at canvas using Matrix, so you will be able to change its position and scale.

Answer 3

Consider trying something like this:

• Create a bitmap from the canvas you wish to zoom into.
• When rendering that bitmap to the screen, you can change the scr rect (which will "zoom" into the bitmap).

I hope this helps.

Answer 4

We can simply do it by canvas.clipRect(rectangle), at this point what we are suppose to do is save the canvas canvas.save() and after canvas.clipRect(rectangle) call canvas.restore().