onScale和Canvas - 如何在缩放图像后调整原点？ [英] onScale and Canvas - how to adjust origin point after zooming image?

问题描述

我有一个非常简单的测试应用程序，其中包含自定义组件，代码基于如何使用反弹效果支持fling手势博客。

解决方案

您正在移动画布两次：首先使用 translate ，然后使用 scale（sx，sy，px，py）; 。

您可以将您的焦点与您的 onScale 中的偏移结合，然后使用 scale（sx，sy）。

I have a very simple test app with a custom component MyView.java - which displays a scrollable and scalable image (representing a board in a Scrabble-like word game):

1) In my scale listener I adjust the scale factor:

public boolean onScale(ScaleGestureDetector detector) {
    mScale *= detector.getScaleFactor();

    // XXX how to adjust mOffsetX and mOffsetY ? XXX

    constrainZoom();
    constrainOffsets();
    invalidate();
    return true;
}

2) And then in the drawing method of my custom component I apply the translation and scale factor:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.translate(mOffsetX, mOffsetY);
    canvas.scale(mScale, mScale);
    gameBoard.setBounds(
        0, 
        0, 
        gameBoard.getIntrinsicWidth(),
        gameBoard.getIntrinsicHeight()
    );
    gameBoard.draw(canvas);  
}

Unfortunately, there seems to be a small bug when scaling with pinch gesture -

I can see, that the scale and boundaries are of correct size after zooming, but the offset of the image is not.

The problem get worse, when the focus point of the pinch gesture is far from 0, 0 point of the screen.

It is a bit difficult to describe the problem in words, but when you check out my test project from GitHub you will see it immediately (and you can always double tap to reset the offset and the scale).

This is probably a common problem with a standard way to solve it, but I haven't been able to find it yet.

The board image is CC BY-SA by Denelson83 and the code is based on the How-to support the fling gesture with a bounce effect blog.

解决方案

You are moving the canvas twice: first with translate, then with scale(sx,sy,px,py);.

You could combine your focuses to your offsets in your onScale and then use scale(sx,sy).

这篇关于onScale和Canvas - 如何在缩放图像后调整原点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！