对应的旋转对象到数值

时间:2012-07-12 19:33:06

标签: java android rotation translate-animation

我有一个360度旋转的密码锁。

组合锁上有数值,这些都是纯粹的图形。

我需要一种方法将图像的旋转转换为图形上的0-99值。

在第一张图中,该值应该能够告诉我“0”

http://i48.tinypic.com/27y67b7.png

在此图中,用户旋转图像后,该值应该能够告诉我“72”

http://i46.tinypic.com/2ueiogh.png

以下是代码:

package co.sts.combinationlock;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.util.Log;
import android.view.GestureDetector;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.View.OnTouchListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;
import android.support.v4.app.NavUtils;

public class ComboLock extends Activity{

        private static Bitmap imageOriginal, imageScaled;
        private static Matrix matrix;

        private ImageView dialer;
        private int dialerHeight, dialerWidth;

        private GestureDetector detector;

        // needed for detecting the inversed rotations
        private boolean[] quadrantTouched;

        private boolean allowRotating;

        @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_combo_lock);

        // load the image only once
        if (imageOriginal == null) {
                imageOriginal = BitmapFactory.decodeResource(getResources(), R.drawable.numbers);
        }

        // initialize the matrix only once
        if (matrix == null) {
                matrix = new Matrix();
        } else {
                // not needed, you can also post the matrix immediately to restore the old state
                matrix.reset();
        }

        detector = new GestureDetector(this, new MyGestureDetector());

        // there is no 0th quadrant, to keep it simple the first value gets ignored
        quadrantTouched = new boolean[] { false, false, false, false, false };

        allowRotating = true;

        dialer = (ImageView) findViewById(R.id.locknumbers);
        dialer.setOnTouchListener(new MyOnTouchListener());
        dialer.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

                @Override
                        public void onGlobalLayout() {
                        // method called more than once, but the values only need to be initialized one time
                        if (dialerHeight == 0 || dialerWidth == 0) {
                                dialerHeight = dialer.getHeight();
                                dialerWidth = dialer.getWidth();

                                // resize
                                        Matrix resize = new Matrix();
                                        //resize.postScale((float)Math.min(dialerWidth, dialerHeight) / (float)imageOriginal.getWidth(), (float)Math.min(dialerWidth, dialerHeight) / (float)imageOriginal.getHeight());
                                        imageScaled = Bitmap.createBitmap(imageOriginal, 0, 0, imageOriginal.getWidth(), imageOriginal.getHeight(), resize, false);

                                        // translate to the image view's center
                                        float translateX = dialerWidth / 2 - imageScaled.getWidth() / 2;
                                        float translateY = dialerHeight / 2 - imageScaled.getHeight() / 2;
                                        matrix.postTranslate(translateX, translateY);

                                        dialer.setImageBitmap(imageScaled);
                                        dialer.setImageMatrix(matrix);
                        }
                        }
                });

    }

        /**
         * Rotate the dialer.
         *
         * @param degrees The degrees, the dialer should get rotated.
         */
        private void rotateDialer(float degrees) {
                matrix.postRotate(degrees, dialerWidth / 2, dialerHeight / 2);

                //need to print degrees

                dialer.setImageMatrix(matrix);
        }

        /**
         * @return The angle of the unit circle with the image view's center
         */
        private double getAngle(double xTouch, double yTouch) {
                double x = xTouch - (dialerWidth / 2d);
                double y = dialerHeight - yTouch - (dialerHeight / 2d);

                switch (getQuadrant(x, y)) {
                        case 1:
                                return Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI;

                        case 2:
                        case 3:
                                return 180 - (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);

                        case 4:
                                return 360 + Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI;

                        default:
                                // ignore, does not happen
                                return 0;
                }
        }

        /**
         * @return The selected quadrant.
         */
        private static int getQuadrant(double x, double y) {
                if (x >= 0) {
                        return y >= 0 ? 1 : 4;
                } else {
                        return y >= 0 ? 2 : 3;
                }
        }

        /**
         * Simple implementation of an {@link OnTouchListener} for registering the dialer's touch events.
         */
        private class MyOnTouchListener implements OnTouchListener {

                private double startAngle;

                @Override
                public boolean onTouch(View v, MotionEvent event) {

                        switch (event.getAction()) {

                                case MotionEvent.ACTION_DOWN:

                                        // reset the touched quadrants
                                        for (int i = 0; i < quadrantTouched.length; i++) {
                                                quadrantTouched[i] = false;
                                        }

                                        allowRotating = false;

                                        startAngle = getAngle(event.getX(), event.getY());
                                        break;

                                case MotionEvent.ACTION_MOVE:
                                        double currentAngle = getAngle(event.getX(), event.getY());
                                        rotateDialer((float) (startAngle - currentAngle));
                                        startAngle = currentAngle;
                                        break;

                                case MotionEvent.ACTION_UP:
                                        allowRotating = true;
                                        break;
                        }

                        // set the touched quadrant to true
                        quadrantTouched[getQuadrant(event.getX() - (dialerWidth / 2), dialerHeight - event.getY() - (dialerHeight / 2))] = true;

                        detector.onTouchEvent(event);

                        return true;
                }
        }

        /**
         * Simple implementation of a {@link SimpleOnGestureListener} for detecting a fling event.
         */
        private class MyGestureDetector extends SimpleOnGestureListener {
                @Override
                public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

                        // get the quadrant of the start and the end of the fling
                        int q1 = getQuadrant(e1.getX() - (dialerWidth / 2), dialerHeight - e1.getY() - (dialerHeight / 2));
                        int q2 = getQuadrant(e2.getX() - (dialerWidth / 2), dialerHeight - e2.getY() - (dialerHeight / 2));

                        // the inversed rotations
                        if ((q1 == 2 && q2 == 2 && Math.abs(velocityX) < Math.abs(velocityY))
                                        || (q1 == 3 && q2 == 3)
                                        || (q1 == 1 && q2 == 3)
                                        || (q1 == 4 && q2 == 4 && Math.abs(velocityX) > Math.abs(velocityY))
                                        || ((q1 == 2 && q2 == 3) || (q1 == 3 && q2 == 2))
                                        || ((q1 == 3 && q2 == 4) || (q1 == 4 && q2 == 3))
                                        || (q1 == 2 && q2 == 4 && quadrantTouched[3])
                                        || (q1 == 4 && q2 == 2 && quadrantTouched[3])) {

                                dialer.post(new FlingRunnable(-1 * (velocityX + velocityY)));
                        } else {
                                // the normal rotation
                                dialer.post(new FlingRunnable(velocityX + velocityY));
                        }

                        return true;
                }
        }

        /**
         * A {@link Runnable} for animating the the dialer's fling.
         */
        private class FlingRunnable implements Runnable {

                private float velocity;

                public FlingRunnable(float velocity) {
                        this.velocity = velocity;
                }

                @Override
                public void run() {
                        if (Math.abs(velocity) > 5 && allowRotating) {
                                //rotateDialer(velocity / 75);
                                //velocity /= 1.0666F;

                                // post this instance again
                                dialer.post(this);
                        }
                }
        }
}

我想我需要将矩阵中的一些信息转换为0-99值。

4 个答案:

答案 0 :(得分:8)

您应该完全重新组织代码。将新的旋转一次又一次地乘以矩阵后是数值上不稳定的计算。最终位图将变形。试图从矩阵中检索旋转角度太复杂且不必要。

首先请注意,this是关于绘制位图的有用的先前文章,其中包含围绕所选点的旋转。

只需保持一个double dialAngle = 0即表盘的当前旋转角度。

您正在做太多的工作来从触摸位置检索角度。让(x0,y0)成为触摸开始的位置。那时,

// Record the angle at initial touch for use in dragging.
dialAngleAtTouch = dialAngle;
// Find angle from x-axis made by initial touch coordinate.
// y-coordinate might need to be negated due to y=0 -> screen top. 
// This will be obvious during testing.
a0 = Math.atan2(y0 - yDialCenter, x0 - xDialCenter);

这是起始角度。当触摸拖动到(x,y)时,使用此坐标相对于初始触摸调整刻度盘。然后更新矩阵并重绘:

// Find new angle to x-axis. Same comment as above on y coord.
a = Math.atan2(y - yDialCenter, x - xDialCenter);
// New dial angle is offset from the one at initial touch.
dialAngle = dialAngleAtTouch + (a - a0); 
// normalize angles to the interval [0..2pi)
while (dialAngle < 0) dialAngle += 2 * Math.PI;
while (dialAngle >= 2 * Math.PI) dialAngle -= 2 * Math.PI;

// Set the matrix for every frame drawn. Matrix API has a call
// for rotation about a point. Use it!
matrix.setRotate((float)dialAngle * (180 / 3.1415926f), xDialCenter, yDialCenter);

// Invalidate the view now so it's redrawn in with the new matrix value.

注意Math.atan2(y, x)完成你使用象限和反正弦所做的所有事情。

要获得当前角度的“滴答”,你需要2 pi的弧度来对应100,所以它非常简单:

double fractionalTick = dialAngle / (2 * Math.Pi) * 100;

要将实际最接近的刻度值作为整数查找,请将分数和mod四舍五入。注意您可以忽略矩阵!

 int tick = (int)(fractionalTick + 0.5) % 100;

这将始终有效,因为dialAngle位于[0..2pi]。需要mod来将舍入值100映射回0。

答案 1 :(得分:5)

为了更好地理解矩阵的作用,理解2d图形变换矩阵是有帮助的:http://en.wikipedia.org/wiki/Transformation_matrix#Examples_in_2D_graphics。如果您正在做的唯一事情是旋转(不是,比如变换或缩放),则提取旋转相对容易。但是,更实际的是,您可以修改旋转代码,并存储状态变量

    private float rotationDegrees = 0;

    /**
     * Rotate the dialer.
     *
     * @param degrees The degrees, the dialer should get rotated.
     */
    private void rotateDialer(float degrees)
            matrix.postRotate(degrees, dialerWidth / 2, dialerHeight / 2);

            this.rotationDegrees += degrees;

            // Make sure we don't go over 360
            this.rotationDegrees = this.rotationDegrees % 360

            dialer.setImageMatrix(matrix);
    }

保留一个变量来存储以旋转度为单位递增的总旋转度。现在,我们知道3.6度是一个刻度。简单的数学运算

tickNumber = (int)rotation*100/360
// It could be negative
if (tickNumber < 0)
    tickNumber = 100 - tickNumber

你需要检查的最后一件事:如果旋转完全 360度,或者刻度数为100,你必须将其视为0(因为没有刻度线) 100)

答案 2 :(得分:4)

这应该是一个简单的乘法,带有“比例”因子,可以将你的学位值(0-359)缩小到你的0-99比例:

float factor = 99f / 359f;
float scaled = rotationDegree * factor;

编辑:更正getAngle函数

对于getAngle,您可以使用atan2函数,将笛卡尔坐标转换为角度。

只需在触摸下方存储第一个触摸坐标,然后在移动时可以应用以下计算:

            // PointF a = touch start point
            // PointF b = current touch move point

            // Translate to origin:
            float x = b.x - a.x;
            float y = b.y - a.y;

            float radians = (float) ((Math.atan2(-y, x) + Math.PI + HALF_PI) % TWO_PI);

弧度范围为两个pi。模数计算将其旋转,因此值为0。旋转方向是逆时针方向。

因此您需要将其转换为度数并更改旋转方向以获得正确的角度。

答案 3 :(得分:2)

表盘应旋转3.6度,从一个标记转到下一个或上一个标记。 每当用户的触摸旋转(围绕中心)3.6度时,表盘应旋转1个标记(3.6度)。

代码段:

float touchAngle = getTouchAngle();
float mark = touchAngle / 3.6f;
if (mCurrentMark != mark) { 
    setDialMark(mark); 
}
  • getTouchAngle()使用atan2计算用户触摸点与中心拨号的角度。
  • setDialMark通过更改的标记数旋转表盘。

void setDialMark(int mark) {  
    rotateDialBy(mCurrentMark - mark);  
    mCurrentMark = mark;    
}

void rotateDialBy(int rotateMarks) {
    rotationAngle = rotateMarks * 3.6;
    ...
    /* Rotate the dial by rotationAngle.   */
}