正文

手机端图片的移动缩放旋转兼容touch

爱博客  爱博客  2022-08-04  520

关键词：

//缩放
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;

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的图片缩放拖拽

varcat=window.cat||{};cat.touchjs={left:0,top:0,scaleVal:1,//缩放rotateVal:0,//旋转curStatus:0,//记录当前手势的状态,0:拖动,1:缩放,2:旋转//初始化init:function($targetObj,callback){touch.on($targetObj,‘touchstart‘,function(e 查看详情

移动端兼容问题注意事项

...效。苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上，使用了双击缩放(doubletaptozoom)的方案，发布IOS系统搭载的safari。如：在手机上用浏览器打开一个PC的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字... 查看详情

移动端图片上传旋转压缩的解决方案

在手机上通过网页input标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括iPhone和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照... 查看详情

exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)

Exif.js插件介绍http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案https://www.jianshu.com/p/ad4501db178e 查看详情

堆叠相冊效果，兼容pc和移动端

在手机端，堆叠效果的相冊是比較常见的一种图片展示方式，每一个人的思路可能会有一些不同，实现的方法不同。本篇博客主要是分享下我的实现方法。欢迎大家提出建议，指出我的不足，先3Q啦~先看一下终于的效果图：思路... 查看详情

移动端兼容性问题解决方案

...safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(doubletaptozoom)的方案，比如你在手机上用浏览器打开一个PC上的查看详情

移动端兼容性问题解决方案

移动端测试注意事项(代码片段)

...件：当在屏幕上按下手指时触发touchmove事件：当在屏幕上移动手指时触发touchend事件：当在屏幕上抬起手指时触发touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作（2）点击事... 查看详情

记录一个移动端图片预览（支持旋转），使用css强制旋转的坑(代码片段)

...没有解决只是换了一个插件,记录一下问题1、需求要支持图片预览和旋转，<1>我选择是vant组件自带的ImagePreview图片预览，用的css强制实现旋转，<2>出现的问题是样式可以旋转但是touch事件没有旋转，<3>导致现象是，... 查看详情

图片移动端图片上传旋转压缩的解决方案

移动端图片上传旋转、压缩的解决方案来源知乎作者林鑫工作上有手机上传准考证等图片的功能，这个是非常必要的，作者写的很全面，就直接记录这个地址了还有一篇文件的上传、下载查看详情

移动端双指缩放旋转

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>移动端双指缩放、旋转</title><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximu 查看详情

touch.js拖动缩放旋转（鼠标手势）

可以实现手势操作：拖动、缩放、旋转。封装好的脚本方法是这样的：varcat=window.cat||{};cat.touchjs={left:0,top:0,scaleVal:1,//缩放rotateVal:0,//旋转curStatus:0,//记录当前手势的状态,0:拖动,1:缩放,2:旋转//初始化init:function($targetObj,callback){touch.... 查看详情

touch.js拖动缩放旋转（鼠标手势）

移动端兼容

...0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（部分安卓手机的UC浏览器写完以后还是可以放大缩小）忽略将页面中的数字识别为电话号码<me 查看详情

移动端常见的兼容性问题

随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研... 查看详情

html5技术教程移动端经常出现的兼容问题

...兼容问题1.安卓浏览器看背景图片，有些设备会模糊因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来... 查看详情