使用touch操作图片
功能:
1、图片放大缩小
2、图片移动
3、图片上做点标记
PS
1、后端程序员不容易,且行且珍惜
2、代码不想封装,累
js代码
/**************************calc picture start****************************************/
//图片拖动开始位置
var startx = 0;
var starty = 0; //图片原始定位
var oLeft = 0;
var oTop = 0; //图片移动后的位置
var imgLeftPx = 0;
var imgTopPx = 0; //图标的位置
var markerLeft = 0;
var markerTop = 0; //手指缩放,记录两根手指的位置
var pageX, pageY, initX, initY, isTouch = false;
var start = []; var touchNumber = 0; function picMove() { $("#floor_backgroup").on("touchstart", function(e) {
//判断手指数
//if(e.changedTouches.length == 1) {
var ttg = e.changedTouches[0]; //计算相对的位置
startx = ttg.pageX
starty = ttg.pageY
var el = $("#floor_backgroup"); oLeft = el.css("left");
oTop = el.css("top");
//} //手指按下时的手指所在的X,Y坐标
pageX = e.targetTouches[0].pageX;
pageY = e.targetTouches[0].pageY; //初始位置的X,Y 坐标
initX = e.target.offsetLeft;
initY = e.target.offsetTop; //记录初始 一组数据 作为缩放使用
start = e.touches; //得到第一组两个点
if(start.length == 2) {
//表示手指已按下
isTouch = true;
} touchNumber = start.length; return false;
}) $("#floor_backgroup").on("touchmove ", function(e) {
//calcPoint(e);
//if(e.touches.length == 1) {
if(!isTouch && touchNumber == 1) {
var ttg = e.touches[0];
//计算相对的位置
var x = ttg.pageX - startx;
var y = ttg.pageY - starty; x = x + parseInt(oLeft.replace("px", ""))
y = y + parseInt(oTop.replace("px", "")) $("#floor_backgroup").css({
"left": x + "px",
"top": y + "px"
})
} //if(e.touches.length == 2) {
if(isTouch) {
//得到第二组两个点
var now = e.touches;
//得到缩放比例, getDistance 是勾股定理的一个方法
var p2 = now[1];
var p1 = now[0]; var x = (p2.pageX - p1.pageX)
var y = (p2.pageY - p1.pageY)
var value01 = Math.sqrt((x * x) + (y * y)) p2 = start[1]
p1 = start[0] x = (p2.pageX - p1.pageX)
y = (p2.pageY - p1.pageY)
var value02 = Math.sqrt((x * x) + (y * y)) var scale = (value01 / value02);
scale = scale.toFixed(8); scale = (scale - 1) / 80 + 1
//console.log(scale) var image = new Image()
image.src = $("#floor_picture").attr("src") //console.log(image.height) if($("#floor_backgroup").height() * scale > image.height) {
return false;
} if($("#floor_backgroup").height() * scale < ($("#floor_img").height() * 0.7) && $("#floor_backgroup").width() * scale < ($("#floor_img").width() * 0.7)) {
return false;
} $("#floor_backgroup").css({
"height": ($("#floor_backgroup").height() * scale) + "px",
"width": ($("#floor_backgroup").width() * scale) + "px"
})
} return false;
}) $("#floor_backgroup").on("touchend ", function(e) {
if(isTouch) {
isTouch = false;
} if(!isTouch && touchNumber == 1){
console.log(1111)
var ttg = e.changedTouches[0];
var x = ttg.pageX - startx;
var y = ttg.pageY - starty; imgLeftPx = parseInt($("#floor_backgroup").css("left").replace("px", ""))
imgTopPx = parseInt($("#floor_backgroup").css("top").replace("px", "")) if(x == 0 && y == 0) {
//$("#floor_img").click();
calcPoint(e);
}
} return false;
}) //图标touch事件
$("#floor_marker").on("touchstart", function(e) {
var ttg = e.changedTouches[0]; //记录手指放下去的位置
markerLeft = ttg.pageX
markerTop = ttg.pageY
//
//e.preventDefault();
return false;
}) $("#floor_marker").on("touchmove", function(e) {
var ttg = e.changedTouches[0]; //拖动过程中获取到的位置
var x = ttg.pageX;
var y = ttg.pageY; //计算拖动的距离
x = x - markerLeft;
y = y - markerTop; markerLeft = ttg.pageX;
markerTop = ttg.pageY; //在原基础上增加移动的距离
var mleft = $("#floor_marker").css("left").replace("%", "")
var mtop = $("#floor_marker").css("top").replace("%", "") var h = $("#floor_backgroup").height()
var w = $("#floor_backgroup").width() x = x + parseFloat(mleft) / 100 * w;
y = y + parseFloat(mtop) / 100 * h; imgleft = x / w * 100;
imgtop = y / h * 100; //console.log(x)
$("#floor_marker").css({
"left": imgleft + "%",
"top": imgtop + "%"
})
//e.preventDefault();
return false;
}) $("#floor_marker").on("touchend", function(e) { //e.preventDefault();
return false;
})
} var imgleft = 0;
var imgtop = 0; function calcPoint(e) {
var ttg = e.changedTouches[0];
var curr = e.target; var x0 = curr.offsetLeft + imgLeftPx
var y0 = $("#item2").height() + imgTopPx //curr.offsetTop //计算相对的位置
var x = ttg.pageX - x0;
var y = ttg.pageY - y0; var h = $("#floor_picture").height()
var w = $("#floor_picture").width() imgleft = x / w * 100;
imgtop = y / h * 100; //console.log(x)
$("#floor_marker").css({
"left": imgleft + "%",
"top": imgtop + "%"
})
}
/**************************calc picture end****************************************/
html代码
<div id="floor_img" style="height: 100%;width: 100%; position: relative; z-index: 3; display: block; background-color:rgba(0,0,0,0.7);overflow: hidden;">
<div id="floor_backgroup" style="position: absolute;width: 100%; " >
<!--图片-->
<img id="floor_picture" style="max-height: 100%; max-width: 100%;" src="../images/bg.png">
<!--标记图片-->
<img id="floor_marker" src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="position: absolute; height: 68px; margin: -64px 0 0 -26px ; width: 53px; left: 0; top: 0;">
</div>
</div>
使用touch操作图片的更多相关文章
- ASP.NET MVC 网站开发总结(七)——C#操作图片:多张图的拼接(旋转)
其实用C#来操作图片的拼接就是在用Graphic画图.个人感觉还是挺有趣的,各种类库提供了丰富多彩的功能. 源代码(移植到一个简单的C#程序中,并没有放在ASP.NET项目中): using Syst ...
- Java操作图片的工具类
操作图片的工具类: import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.a ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片
原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...
- 在Android下通过ExifInterface类操作图片的Exif信息
什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...
- 利用numpy实现多维数组操作图片
1.上次介绍了一点点numpy的操作,今天我们来介绍它如何用多维数组操作图片,这之前我们要了解一下色彩是由blue ,green ,red 三种颜色混合而成,0:表示黑色 ,127:灰色 ,255:白 ...
- 在c#中用指针操作图片像素点
在Bitmap类中有两个函数SetPixel,GetPixel,分别用来设置或读取图片中指定点的颜色(这里发现了VS的一个错误,SetPixel的文档说明写的是“获取颜色”??). 当要对一幅图进行相 ...
- UWP开发入门(十五)——在FlipView中通过手势操作图片
本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作.在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧. 首先我们先实现一个横向的可以浏览图片的功能,也是大部分APP中的实现 ...
- java使用Thumbnailator操作图片
Thumbnailator 是一个用来生成图像缩略图.裁切.旋转.添加水印等操作的 Java 类库,通过很简单的代码即可生成图片缩略图,也可直接对一整个目录的图片生成缩略图. Thumbnailato ...
- Python+OpenCV图像处理(三)—— Numpy数组操作图片
一.改变图片每个像素点每个通道的灰度值 (一) 代码如下: #遍历访问图片每个像素点,并修改相应的RGB import cv2 as cv def access_pixels(image): prin ...
随机推荐
- pyinstaller相关问题 & pygame文件打包成exe文件 & 武装飞船 & 飞机大战
自己照书写了一个飞机大战游戏的python程序,想把它打包成一个exe文件,在查阅相关教程并经过数次尝试后终于成功. 安装打包应用 pyinstaller 在cmd命令窗口下pip install p ...
- C++中类成员变量在初始化列表中的初始化顺序
引子:我们知道,C++中类成员变量的初始化顺序与其在类中的声明顺序是有关的. 先看代码: class TestClass1 { public: TestClass1() { cout << ...
- k8s系列---yaml文件格式
https://www.bejson.com/validators/yaml_editor/ yaml文件大致格式解析,通过上面这个解析网站,可以看到yaml文件解析的格式长什么样,如果知道字典和列表 ...
- Windwos日志分析
Windows日志分析工具 查看系统日志方法: 在“开始”菜单上,依次指向“所有程序”.“管理工具”,然后单击“事件查看器” 按 "Window+R",输入 ”eventvwr.m ...
- 全文检索Lucene框架---查询索引
一. Lucene索引库查询 对要搜索的信息创建Query查询对象,Lucene会根据Query查询对象生成最终的查询语法,类似关系数据库Sql语法一样Lucene也有自己的查询语法,比如:“name ...
- 迁移桌面程序到MS Store(14)——APPX嵌入WCF Service以Admin权限运行
Windows10 1809版本开始,微软又对UWP开放了新的Capability:AllowElevation. 通过这个新的Capability,UWP APP能够在运行时向用户请求Admin权限 ...
- OpenResty 在马蜂窝广告监测中的应用
马蜂窝技术原创内容,更多干货请订阅公众号:mfwtech 广告是互联网变现的重要手段之一. 以马蜂窝旅游 App 为例,当用户打开我们的应用时,有可能会在首屏或是信息流.商品列表中看到推送的广告.如果 ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- 一行代码解决MacBook Pro安装VSCode没有应用图标问题
笔者今天升级了VSCode,安装完后发现Dock(程序坞)没有VSCode的图标了,导致切换应用非常不方便. 具体情况就像下面这张图,VSCode明明开着,但是在Dock找不到VSCode了. 解决办 ...
- Microchip SPI串行SRAM和NVSRAM器件
Microchip的SRAM和NVSRAM系列(SPI串行SRAM和NVSRAM设备)提供了一种轻松添加外部RAM的方式,且具有以下特性功能 特性低功耗CMOS技术:4μA最大待机电流 标准4引脚SP ...