26-拖拉功能和多点触摸

 

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:src="@drawable/liming"
    android:scaleType="matrix"  <span style="color:#FF0000;">采用矩阵来完成拖拉</span>
    android:id="@+id/imageView"
    />
</LinearLayout>

MainActivity

package cn.itcast.drag;

import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private ImageView imageView;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        imageView = (ImageView) this.findViewById(R.id.imageView);
        //图片设置监听器
        imageView.setOnTouchListener(new TouchListener());
    }
    
    private final class TouchListener implements OnTouchListener{
    	private PointF startPoint = new PointF();
    	private Matrix matrix = new Matrix();
    	private Matrix currentMatrix = new Matrix();
    	private int mode = 0;
    	private static final int DRAG = 1;
    	private static final int ZOOM = 2;
    	private float startDis;//开始距离
    	private PointF midPoint;//中间点
    	
		public boolean onTouch(View v, MotionEvent event) {
			//MotionEvent.ACTION_MASK 255 与运算只要最后8位  低8为存储触摸事件
			switch (event.getAction() & MotionEvent.ACTION_MASK) {
			case MotionEvent.ACTION_DOWN://手指压下屏幕
				mode = DRAG;
				currentMatrix.set(imageView.getImageMatrix());//记录ImageView当前的移动位置
				startPoint.set(event.getX(), event.getY());//记录坐标
				break;

			case MotionEvent.ACTION_MOVE://手指在屏幕移动,该 事件会不断地触发
				if(mode == DRAG){
					float dx = event.getX() - startPoint.x;//得到在x轴的移动距离
					float dy = event.getY() - startPoint.y;//得到在y轴的移动距离
					matrix.set(currentMatrix);//在没有进行移动之前的位置基础上进行移动
					matrix.postTranslate(dx, dy);
				}else if(mode == ZOOM){//缩放
					float endDis = distance(event);//结束距离
					if(endDis > 10f){
						float scale = endDis / startDis;//得到缩放倍数
						matrix.set(currentMatrix);
						matrix.postScale(scale, scale, midPoint.x, midPoint.y);
					}
				}				
				break;
				
			case MotionEvent.ACTION_UP://手指离开屏
			case MotionEvent.ACTION_POINTER_UP://有手指离开屏幕,但屏幕还有触点(手指)
				mode = 0;
				break;
				
			case MotionEvent.ACTION_POINTER_DOWN://当屏幕上还有触点(手指),再有一个手指压下屏幕
				mode = ZOOM;
				startDis = distance(event);
				if(startDis > 10f){
					midPoint = mid(event);
					currentMatrix.set(imageView.getImageMatrix());//记录ImageView当前的缩放倍数
				}
				break;
			}
			imageView.setImageMatrix(matrix);//移动图片
			return true;
		}
    	
    }
    /**
     * 计算两点之间的距离
     * @param event
     * @return
     */
	public static float distance(MotionEvent event) {
		float dx = event.getX(1) - event.getX(0);
		float dy = event.getY(1) - event.getY(0);
		return FloatMath.sqrt(dx*dx + dy*dy);
	}
	/**
	 * 计算两点之间的中间点
	 * @param event
	 * @return
	 */
	public static PointF mid(MotionEvent event){
		float midX = (event.getX(1) + event.getX(0)) / 2;
		float midY = (event.getY(1) + event.getY(0)) / 2;
		return new PointF(midX, midY);
	}
}


提供的引用内容未提及在Vue 3中为el-drawer组件添加可拖拉功能的方法。不过一般可按以下思路实现该功能: ### 1. 引入相关依赖组件 首先要在项目里引入ElementPlus的el-drawer组件,同时确保已安装Vue 3。 ```vue <template> <el-drawer :visible.sync="drawerVisible" title="可拖拉抽屉" content-class="draggable-drawer" > <template #content> <!-- 抽屉内容 --> <p>这是抽屉的内容。</p> </template> <template #footer> <el-button @click="drawerVisible = false">关闭</el-button> </template> </el-drawer> </template> <script setup> import { ref } from 'vue'; import { ElDrawer, ElButton } from 'element-plus'; const drawerVisible = ref(false); </script> <style scoped> .draggable-drawer { /* 这里可以添加样式以方便识别可拖拉区域 */ cursor: move; } </style> ``` ### 2. 实现拖拉功能 可以借助Vue 3的`@vueuse/core`库中的`useDraggable`函数实现拖拉功能,或者手动编写拖拉逻辑。 #### 使用`@vueuse/core`库的`useDraggable`函数 先安装`@vueuse/core`库: ```bash npm install @vueuse/core ``` 然后在项目里使用: ```vue <template> <el-drawer :visible.sync="drawerVisible" title="可拖拉抽屉" content-class="draggable-drawer" ref="drawerRef" > <template #content> <!-- 抽屉内容 --> <p>这是抽屉的内容。</p> </template> <template #footer> <el-button @click="drawerVisible = false">关闭</el-button> </template> </el-drawer> </template> <script setup> import { ref } from 'vue'; import { ElDrawer, ElButton } from 'element-plus'; import { useDraggable } from '@vueuse/core'; const drawerRef = ref(null); const drawerVisible = ref(false); const { x, y } = useDraggable(drawerRef, { // 可以根据需要添加更多配置 }); </script> <style scoped> .draggable-drawer { cursor: move; } </style> ``` #### 手动编写拖拉逻辑 ```vue <template> <el-drawer :visible.sync="drawerVisible" title="可拖拉抽屉" content-class="draggable-drawer" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp" > <template #content> <!-- 抽屉内容 --> <p>这是抽屉的内容。</p> </template> <template #footer> <el-button @click="drawerVisible = false">关闭</el-button> </template> </el-drawer> </template> <script setup> import { ref } from 'vue'; import { ElDrawer, ElButton } from 'element-plus'; const drawerVisible = ref(false); const isDragging = ref(false); const startX = ref(0); const startY = ref(0); const offsetX = ref(0); const offsetY = ref(0); const onMouseDown = (e) => { isDragging.value = true; startX.value = e.clientX; startY.value = e.clientY; }; const onMouseMove = (e) => { if (isDragging.value) { const dx = e.clientX - startX.value; const dy = e.clientY - startY.value; offsetX.value += dx; offsetY.value += dy; startX.value = e.clientX; startY.value = e.clientY; // 这里可以根据需要更新抽屉的位置 // 例如通过修改样式来移动抽屉 } }; const onMouseUp = () => { isDragging.value = false; }; </script> <style scoped> .draggable-drawer { cursor: move; } </style> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值