功能:

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操作图片的更多相关文章

  1. ASP.NET MVC 网站开发总结(七)——C#操作图片:多张图的拼接(旋转)

    其实用C#来操作图片的拼接就是在用Graphic画图.个人感觉还是挺有趣的,各种类库提供了丰富多彩的功能. 源代码(移植到一个简单的C#程序中,并没有放在ASP.NET项目中): using Syst ...

  2. Java操作图片的工具类

    操作图片的工具类: import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.a ...

  3. 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...

  4. 在Android下通过ExifInterface类操作图片的Exif信息

    什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...

  5. 利用numpy实现多维数组操作图片

    1.上次介绍了一点点numpy的操作,今天我们来介绍它如何用多维数组操作图片,这之前我们要了解一下色彩是由blue ,green ,red 三种颜色混合而成,0:表示黑色 ,127:灰色 ,255:白 ...

  6. 在c#中用指针操作图片像素点

    在Bitmap类中有两个函数SetPixel,GetPixel,分别用来设置或读取图片中指定点的颜色(这里发现了VS的一个错误,SetPixel的文档说明写的是“获取颜色”??). 当要对一幅图进行相 ...

  7. UWP开发入门(十五)——在FlipView中通过手势操作图片

    本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作.在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧. 首先我们先实现一个横向的可以浏览图片的功能,也是大部分APP中的实现 ...

  8. java使用Thumbnailator操作图片

    Thumbnailator 是一个用来生成图像缩略图.裁切.旋转.添加水印等操作的 Java 类库,通过很简单的代码即可生成图片缩略图,也可直接对一整个目录的图片生成缩略图. Thumbnailato ...

  9. Python+OpenCV图像处理(三)—— Numpy数组操作图片

    一.改变图片每个像素点每个通道的灰度值 (一) 代码如下: #遍历访问图片每个像素点,并修改相应的RGB import cv2 as cv def access_pixels(image): prin ...

随机推荐

  1. gulp 压缩文件2 摘

    一下代码用来简单的压缩 .js  和 .css   ;  在cmd里执行 gulp minifycss    minifyjs,各task执行是正常的. 注意,先安装后相应的模块,建议安装到本地. 说 ...

  2. linux入门系列13--磁盘管理之RAID、LVM技术

    前一篇文章学习了磁盘分区.格式化.挂载等相关知识,本文将讲解RAID和LVM技术. 磁盘管理操作主要是运维人员用的较多,如果只是单纯的开发人员,可以先略过本文.但是在很多小公司里往往都是一人多用,运维 ...

  3. Webpack之optimization.splitChunks代码分割插件的配置

    SplitChunkPlugin插件配置参数详解 对引入的库代码(例如:lodash.jQuery等)进行代码的分割进行优化 若配置时只写chunks:"all",其余则为默认配置 ...

  4. VS2015中使用qt开发客户端,QPluginLoader加载dll为null的解决办法

    1,问题重现: 使用vs2015开发一款qt软件,使用了QPluginLoader动态加载插件的方式,调试的时候,发现dll模块没有加载进来,debug发现QPluginLoader的instance ...

  5. Mysql无法启动、闪退

    一.mysql下载完成后,运行bin目录下的mysql.exe,提示文件缺失   二.此报错为VC运行库不全或没有安装导致,百度搜索“微软常用运行库合集”进行下载安装即可解决   三.运行时闪退,无法 ...

  6. Python学习小记(5)---Magic Method

    具体见The Python Language Reference 与Attribute相关的有 __get__ __set__ __getattribute__ __getattr__ __setat ...

  7. Nginx Rewrite相关功能

    目录 Nginx Rewrite相关功能 ngx_http_rewrite_module模块指令: if指令: set指令: break指令: return指令: rewrite_log指令: rew ...

  8. StackExchange.Redis 之 String 类型示例

    String类型很简单,就不做示例演示了,这里只贴出Helper类 /// <summary> /// 判断key是否存在 /// </summary> /// <par ...

  9. Python面试(网编+数据库)

    第一部分 必答题 简述 OSI 7层模型及其作用?(2分) 应用层:与用户直接交互,软件.网站等 表示层:使用软件.网站可以查看的数据,图片等 会话层:保持登录状态,电脑中为cookie 传输层:选择 ...

  10. mysql必知必会--创建计算字段

    计算字段 存储在数据库表中的数据一般不是应用程序所需要的格式.下面举 几个例子. * 如果想在一个字段中既显示公司名,又显示公司的地址,但这两 个信息一般包含在不同的表列中. * 城市.州和邮政编码存 ...