双指缩放实例(同事写的,不是转载也不是原创)

最新推荐文章于 2024-08-12 21:44:16 发布
最新推荐文章于 2024-08-12 21:44:16 发布
阅读量105 收藏
点赞数
分类专栏： web前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012433538/article/details/84595627
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" name="viewport"/>
<title>手指</title>
<style>
.bg-model{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.rect{position:absolute;width:60px;height:60px;border:1px dashed #f00}
.resize{position:absolute;width: 30px;height: 30px;bottom: -15px;right: -15px;background: rgb(163, 146, 54)
}
</style>
</head>
<body>
<div class="bg-model" id="div1">
<div class="rect" id="div2" style="top:10px;left:10px;width: 60px;">
<p id="DebugTXT"></p>
<div class="resize" id="div3"></div>
</div>
</div>
<script>
var d1=document.getElementById('div1'),d2=document.getElementById('div2') ,d3=document.getElementById('div3');
var Moving,Resizing;
var startX,startY,sideLen=60;
d1.addEventListener('touchstart',touchStart,true);
d1.addEventListener('touchmove',touchMove,true);
d1.addEventListener('touchend',touchEnd,true);

var twoFinger;
var pos1={x:0,y:0},pos2={x:0,y:0};
var pos12={x:0,y:0},pos22={x:0,y:0};
function touchStart(e){
var el = e.target;
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
if(e.touches.length==2){
twoFinger=true;
pos1.x=e.touches[0].clientX; pos1.y=e.touches[0].clientY;
pos2.x=e.touches[1].clientX; pos2.y=e.touches[1].clientY;
return;
}else{twoFinger=false;}

var touch= e.touches[0];
if (el.id == 'div2') {
Moving = true;
Resizing = false;
startX=touch.clientX-parseInt(d2.style.left);
startY=touch.clientY-parseInt(d2.style.top);
} else if (el.id == 'div3') {
Moving = false;
Resizing = true; sideLen=parseInt(d2.style.width);
startX=touch.clientX;
startY=touch.clientY;
d3.style.display='none';
}twoFinger=false;
}
function touchMove(e){
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
e.stopPropagation();
e.preventDefault();
if (e.changedTouches.length == 2) {
twoFinger = true;
pos12.x = e.changedTouches[0].clientX;
pos12.y = e.changedTouches[0].clientY;
pos22.x = e.changedTouches[1].clientX;
pos22.y = e.changedTouches[1].clientY;
return;
}
var touch = e.changedTouches[0];
if (Moving) {
var endX = touch.clientX, endY = touch.clientY;
d2.style.left = endX - startX + 'px';
d2.style.top = endY - startY + 'px';
} else if (Resizing) {
var endX = touch.clientX, endY = touch.clientY;
var increase = Math.min(endX - startX, endY - startY);
d2.style.width = sideLen + increase + 'px';
d2.style.height = sideLen + increase + 'px';
}
}

function touchEnd(e){
DebugTXT.innerHTML='touch:'+e.touches.length+'<br>changeTouch:'+e.changedTouches.length+'<br>'+twoFinger;
if(e.touches.length==0&&twoFinger){
twoFinger=false;
var len1=Math.pow(Math.pow(pos1.x-pos2.x,2)+Math.pow(pos1.y-pos2.y,2),0.5).toFixed(0);
var len2=Math.pow(Math.pow(pos12.x-pos22.x,2)+Math.pow(pos12.y-pos22.y,2),0.5).toFixed(0);
//alert('len1:'+len1+',len2:'+len2);
var newL=len2-len1>0?1.5:0.5;
sideLen=parseInt(d2.style.width);
d2.style.width =d2.style.height =sideLen*newL+ 'px';

}
Moving=Resizing=false; d3.style.display='block';
}

</script>
</body>
</html>
_简单生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现手机端图片双指缩放变大变小插件
YaWen的博客
02-20 3万+
对于手机上图片的缩放通常有两种： 一种是屏幕上有一张图片，直接双指缩放，如下图： 还有一种是类似于手机相册一样，一张一张的，点击单张之后，全屏打开，在进行缩放操作，如下图： 接下来，介绍第一种情况的插件，pinchzoom.js，用法很简单，只需要修改img的路径，在引用pinchzoom.js以及你平时用的jquery就可以。 pinchzoom.js下载链接贴上完整的代码：<!D
JS实现移动端双指缩放和旋转方法
10-15
主要介绍了JS实现移动端双指缩放和旋转方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Delphi-XE5-手势操作-Gestures-使用方法
一个会抄的开发人员ｆ（ｘ）
02-10 3091
Delphi-XE5-手势操作-Gestures-使用方法 一、首先转载一下别人的方法介绍： 今天尝试了TTabControl的使用。在很多Android的app中，首次启动时都使用选项卡模式进行产品介绍，用户通过向左滑动，改变选项卡。在xe5下这项工作由TTabControl控件完成，如下图：   1、TTabControl外观 TTabCo
Mac基本操作
LZJWXJ树袋熊
01-31 3717
一、废纸篓 command＋delete：删除xx至废纸篓 command＋delete＋shift：清空废纸篓 command＋shift＋A：转到应用程序目录 command＋shift＋C：转到computer目录 command＋shift＋H：转到home目录 二、顶行特殊键 esc f1 f2 f3 f4 f5 f6 f7 f8 f9 f10 f11 f12 电源   ...
Android 图片双指缩放 单指拖拽 、拖到边界回弹
04-11
在Android开发中，实现图片的双指缩放和单指拖拽是常见的需求，尤其在设计用户界面或者创建自定义视图时。这种功能能够提供更丰富的交互体验，让用户能够自由地查看和操作图片。本篇文章将深入探讨如何在Android应用...
双指缩放图片，双击放大缩小图片DEMO
08-03
本DEMO主要展示了如何利用双指缩放和双击操作来实现图片的放大与缩小，提供了一个直观且易用的交互体验。以下将详细解释这个DEMO涉及的技术点。 首先，我们要理解双指缩放（Pinch Zoom）的概念。双指缩放是基于多点...
移动端jquery效果显示地图双指缩放，单指拖动
09-28
"移动端jquery效果显示地图双指缩放，单指拖动"这个主题主要探讨了如何使用jQuery和JavaScript技术在移动设备上实现类似地图应用的交互功能，即双指缩放（pinch-to-zoom）和单指拖动（drag-to-move）。下面将详细...
android双指缩放移动控件
04-21
在Android开发中，实现双指缩放和移动控件是一项常见的需求，特别是在设计触摸交互的界面时。这一功能主要用于图片查看器、地图应用或者任何需要用户进行手势操作的场景。以下将详细介绍如何在Android中实现这个功能...
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1514
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
html--前端
m0_60274660的博客
08-07 357
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
html复习
m0_73280507的博客
08-12 610
Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。外链选择，友站友情链接。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 562
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
html实现funnel图
最新发布
Debug yourself!
08-12 583
这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。你还可以使用SVG（矢量图形）直接绘制漏斗图。// 使用刚指定的配置项和数据显示图表。// 初始化echarts实例。// 指定图表的配置项和数据。
Html详解——Vue基础
敲厉害的燕宝的博客
08-07 1109
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
htmlToPdf
weixin_46087919的博客
08-12 230
htmlToPdf
html语法
羽墨墨的博客
08-06 392
HTML5 和 CSS3 是 Web 开发领域中的两个重要标准，它们带来了许多新功能和改进，使得开发者能够创建更加丰富和交互式的网页应用。以下是这两个标准的一些重要特性和示例。
使用Apache POI将Word转HTML
wqww_1的博客
08-10 319
【代码】使用Apache POI将Word转HTML。
Android Image单指滑动双指缩放功能的最优写法
05-27
实现Android上的图片单指滑动和双指缩放功能，可以使用GestureDetector和ScaleGestureDetector两个类。具体步骤如下： 1. 在布局文件中添加一个ImageView，用于显示图片。 2. 在Activity中实例化GestureDetector和ScaleGestureDetector，并重写相应的回调方法。 ```java public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener, ScaleGestureDetector.OnScaleGestureListener { private ImageView imageView; private GestureDetector gestureDetector; private ScaleGestureDetector scaleGestureDetector; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = findViewById(R.id.imageView); gestureDetector = new GestureDetector(this, this); gestureDetector.setOnDoubleTapListener(this); scaleGestureDetector = new ScaleGestureDetector(this, this); } @Override public boolean onTouchEvent(MotionEvent event) { gestureDetector.onTouchEvent(event); scaleGestureDetector.onTouchEvent(event); return true; } @Override public boolean onDown(MotionEvent e) { return true; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return true; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 单指滑动 if (e2.getPointerCount() == 1) { float dx = e2.getX() - e1.getX(); float dy = e2.getY() - e1.getY(); imageView.scrollBy((int) dx, (int) dy); return true; } return false; } @Override public void onLongPress(MotionEvent e) { } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return true; } @Override public boolean onSingleTapConfirmed(MotionEvent e) { return true; } @Override public boolean onDoubleTap(MotionEvent e) { // 双击缩放 float scale = imageView.getScaleX(); if (scale == 1.0f) { imageView.setScaleX(2.0f); imageView.setScaleY(2.0f); } else { imageView.setScaleX(1.0f); imageView.setScaleY(1.0f); } return true; } @Override public boolean onDoubleTapEvent(MotionEvent e) { return true; } @Override public boolean onScale(ScaleGestureDetector detector) { // 双指缩放 float scaleFactor = detector.getScaleFactor(); float scale = imageView.getScaleX(); if (scaleFactor * scale >= 1.0f && scaleFactor * scale <= 3.0f) { imageView.setScaleX(scaleFactor * scale); imageView.setScaleY(scaleFactor * scale); } return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { } } ``` 3. 在onTouchEvent方法中分别调用GestureDetector和ScaleGestureDetector的onTouchEvent方法。 4. 在重写的onScroll方法中，通过判断触摸点的数量来实现单指滑动。 5. 在重写的onDoubleTap方法中，通过判断当前的缩放比例来实现双击缩放。 6. 在重写的onScale方法中，通过ScaleGestureDetector获取缩放比例来实现双指缩放。 以上就是Android上实现图片单指滑动和双指缩放功能的最优写法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值