进阶版多点触控扇形图：旋转、缩放、移动，复位

Android

2023-04-28 17:11:01

升级版多点触控扇形图：交互体验全面升级

概览

我们在之前的博客中介绍了多点触控扇形图的基本玩法，让你可以单指旋转、二指放大，三指移动。今天，我们将升级这个扇形图，为你带来更丰富的交互体验。

新功能

这次升级版的多点触控扇形图加入了以下新功能：

四指复位： 现在，你可以通过同时按下四根手指来复位扇形图。
交互优化： 旋转、缩放和移动的效果得到了优化，操作更加流畅和精准。

实现原理

为了实现这些新功能，我们需要对代码进行一些修改：

1. 布局文件中添加手指计数器：

<TextView
    android:id="@+id/finger_counter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="手指数量：0"
    android:textSize="20sp" />

2. 在 onTouchEvent() 方法中处理手指计数器：

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 获取手指数量
    int fingerCount = event.getPointerCount();

    // 更新手指计数器
    fingerCounter.setText("手指数量：" + fingerCount);

    // 根据手指数量进行不同的操作
    switch (fingerCount) {
        case 1:
            // 单指旋转
            rotate(event);
            break;
        case 2:
            // 二指缩放
            scale(event);
            break;
        case 3:
            // 三指移动
            move(event);
            break;
        case 4:
            // 四指以上复位
            reset();
            break;
    }

    return true;
}

3. 实现 rotate()、scale()、move() 和 reset() 方法：

private void rotate(MotionEvent event) {
    // 获取手指的移动距离
    float deltaX = event.getX() - startTouchX;
    float deltaY = event.getY() - startTouchY;

    // 计算旋转角度
    double angle = Math.atan2(deltaY, deltaX);

    // 更新扇形图的旋转角度
    fanView.setRotation((float) Math.toDegrees(angle));
}

private void scale(MotionEvent event) {
    // 获取手指的距离
    float distance = getDistance(event);

    // 计算缩放比例
    float scaleFactor = distance / startDistance;

    // 更新扇形图的缩放比例
    fanView.setScaleX(scaleFactor);
    fanView.setScaleY(scaleFactor);
}

private void move(MotionEvent event) {
    // 获取手指的移动距离
    float deltaX = event.getX() - startTouchX;
    float deltaY = event.getY() - startTouchY;

    // 更新扇形图的平移距离
    fanView.setTranslationX(fanView.getTranslationX() + deltaX);
    fanView.setTranslationY(fanView.getTranslationY() + deltaY);
}

private void reset() {
    // 重置扇形图的旋转角度、缩放比例和平移距离
    fanView.setRotation(0);
    fanView.setScaleX(1);
    fanView.setScaleY(1);
    fanView.setTranslationX(0);
    fanView.setTranslationY(0);
}