//缩放
var initialScale = 1;
var currentScale = 1;
touch.on('#target', 'pinch', function (ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > 1.5 ? 1.5 : currentScale;
currentScale = currentScale < 0.5 ? 0.5 : currentScale;
this.style.webkitTransform = 'scale(' + currentScale + ')' + ' ' + 'rotate(' + totalAngle + 'deg)';
this.style.webkitTransition = 'all ease 0.05s';

});

//旋转
var angle = 0;
var totalAngle = 0;
touch.on('#target', 'rotate', function (ev) {
totalAngle = angle + ev.rotation;
if (ev.fingerStatus === 'end') {
angle = angle + ev.rotation;
}
this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)' + ' ' + 'scale(' + currentScale + ')';
});

//拖拽,第二个为true是背景图拖拽
var fBindDrag = function (obj, outmove) {
var obj = $(obj);
var pt = obj.parent();
var xy = null; obj.xy();
touch.on(obj[0], 'touchstart', function (ev) {
if (true) { xy = { x: obj[0].offsetLeft, y: obj[0].offsetTop } }
// ev.preventDefault();
});
var dx, dy;
touch.on(obj[0], 'drag', function (ev) {
dx = dx || 0;
dy = dy || 0;
var offx = dx + ev.x;
var offy = dy + ev.y;
var nx = xy.x + offx, ny = xy.y + offy;
if (outmove) {
if (nx > 0) {
nx = 0;
}
if (nx + obj[0].offsetWidth < pt[0].clientWidth) {
nx = pt[0].clientWidth - obj[0].offsetWidth;
}
if (ny > 0) { ny = 0; }
if (ny + obj[0].offsetHeight < pt[0].clientHeight) {
ny = pt[0].clientHeight - obj[0].offsetHeight;
}
} else {
if (nx < 0) {
nx = 0;
}
if (nx + obj[0].offsetWidth > pt[0].clientWidth) {
nx = pt[0].clientWidth - obj[0].offsetWidth;
}

if (ny < 0) { ny = 0; }
if (ny + obj[0].offsetHeight > pt[0].clientHeight) {
ny = pt[0].clientHeight - obj[0].offsetHeight+32;
}
}
obj.css("left", nx + "px");
obj.css("top", ny + "px");
});

touch.on(obj[0], 'dragend', function (ev) {
// dx += ev.x;
// dy += ev.y;
});
}

//背景图缩放,uploadImg为背景框

var fScale = function (obj) {

var obj = $(obj);
var target = obj[0];
var pt = obj.parent();
//target.style.webkitTransition = 'all ease 0.05s';
var ox, oy, ow, oh;
touch.on($("#uploadImg")[0], 'touchstart', function (ev) {
ox = target.offsetLeft;
oy = target.offsetTop;
ow = target.clientWidth;
oh = target.clientHeight;
// ev.preventDefault();
});

var initialScale = 1;
var currentScale;

touch.on($("#uploadImg")[0], 'pinch', function (ev) {
currentScale = ev.scale - 1;
var mw = target.clientWidth;
var mh = target.clientHeight;

var xywh = { x: 0, y: 0, w: 0, h: 0 };
xywh.w = ow * ev.scale;
if (xywh.w < pt[0].clientWidth) {
xywh.w = pt[0].clientWidth;
}
xywh.h = xywh.w * mh * 1.0 / mw;
if (xywh < pt[0].clientHeight) {
xywh.h = pt[0].clientHeight;
xywh.w = xywh.h * mw / mh;
}

xywh.x = ox - (xywh.w - ow) / 2;
xywh.y = oy - (xywh.h - oh) / 2;
if (xywh.x > 0) { xywh.x = 0; }
if (xywh.y > 0) { xywh.y = 0; }
if (xywh.x + target.offsetWidth < pt[0].clientWidth) {
xywh.x = 0;
}
if (xywh.y + target.offsetHeight < pt[0].clientHeight) {
xywh.y = 0;
}

index = 0;
obj.css({ left: xywh.x + 'px', top: xywh.y + 'px', width: xywh.w + 'px' });
});

touch.on($("#uploadImg")[0], 'pinchend', function (ev) {

});
}

手机端 图片的移动缩放旋转兼容touch的更多相关文章

  1. 手机端图片插件可缩放 旋转 全屏查看photoswipe

    官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...

  2. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  3. 手机端图片预览和缩放js

    转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...

  4. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  5. css——手机端图片正确显示

    这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下                        左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...

  6. js动态改变图片热区坐标,手机端图片热区自适应

    <img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...

  7. js手机端图片弹出方法

    1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...

  8. iphone手机端图片错位修正的js代码

    <script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...

  9. Html5 手机端网页不允许缩放

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. python 简单验证码 random模块

    random 模块,产生随机数: chr 将数字转成字母. ascii 数字与字符对应表 链接 import randomtemp=""for i in range(0,4): r ...

  2. iOS 生成随机字符串 从指定字符串随机产生n个长度的新字符串

    随机字符串 - 生成指定长度的字符串 -(NSString *)randomStringWithLength:(NSInteger)len { NSString *letters = @"a ...

  3. MyBatis 3 User Guide Simplified Chinese.pdf

    MyBatis 3 用户指南 帮助我们把文档做得更好… 如果你发现了本文档的遗漏之处,或者丢失 MyBatis 特性的说明时,那么最好的方法就 是了解一下这个遗漏之处然后把它记录下来. 我们在 wik ...

  4. python+unittest框架整理(一点点学习前辈们的封装思路,一点点成长。。。)

    预期框架整理目标: 1.单个用例维护在单个.py文件中可单个执行,也可批量生成组件批量执行 2.对定位参数,定位方法,业务功能脚本,用例脚本,用例批量执行脚本,常用常量进行分层独立,各自维护在单独的. ...

  5. js实现选项卡切换的效果

    效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...

  6. linux下部署php项目-Apache、php、mysql关联

    linux下部署php项目环境可以分为两种,一种使用Apache,php,mysql的压缩包安装,一种用yum命令进行安装. 使用三种软件的压缩包进行安装,需要手动配置三者之间的关系.apache和p ...

  7. 使用DotNetty编写跨平台网络通信程序

    长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但使用了C#和.Net平台的技术特点, ...

  8. 一天搞定CSS:背景background--03

    背景分为-背景颜色和背景图片 1.背景属性 2.背景颜色 代码演示: <!DOCTYPE html> <html> <head> <meta charset= ...

  9. WPF中用户控件对比自定义控件(UserControl VS CustomControl)

    接着这篇文章(http://www.cnblogs.com/shiyue/archive/2013/02/02/2889907.html)写: 用户控件(组合) 用于在一个项目中使用多次 自定义控件( ...

  10. 最基础的mybatis入门demo

    demo结构 数据库情况 (不会转sql语句 骚瑞) 数据库连接信息 jdbc.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:m ...