<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch</title>
<script src="jquery.min.js"></script>
<script src="hammer.min.js"></script>
<style>
.phone-ding-content {
margin-top: -45px;
margin-left: -17px;
width: 34px;
height: 44px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<!-- ***************************** -->
<div id="scale" style="height: 0px;width: 0px;">
<img id="img1" src="defaultPhoneBackground.png" onload="loadImage(event)" id="testimg" style="position: absolute;" border="0">
</div>
<!-- ***************************** -->
<script type="text/javascript">
function point2D(x,y){
return {x : x,y : y};
}
var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var pageWidth,pageHeight,width,height,imageScale,halfScale;
var tMatrix = [1,0,0,1,0,0]//x缩放，无，无，y缩放，x平移，y平移
var initScale = 1;//初始化scale
var el = document.getElementById("scale");//获取元素
var mc = new Hammer.Manager(el)
var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
var ticking = false
var poscenter = point2D(0,0);//缓存双指的中心坐标
var duration = '';//设置过渡效果，用于双击缩放效果
var lastTranslate = point2D(0,0);//记录上次的偏移值
var lastcenter= point2D(el.offsetWidth/2,el.offsetHeight/2)//图像的中心点，用于对比双指中心点
var center = lastcenter
mc.add(new Hammer.Pan({ threshold: 0, pointers: 1 }))
mc.add(new Hammer.Pinch({ threshold: 0 }))
mc.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
mc.on("panmove", onPan);
mc.on("panstart",onPanStart)
mc.on("pinchmove", onPinch);
mc.on("pinchstart",onPinchStart);
mc.on("doubletap",onDoubleTap);
function onPanStart(ev){
lastTranslate = point2D(tMatrix[4],tMatrix[5])//缓存上一次的偏移值
}
function onPan(ev){
duration = ''
el.className = ''
var offsetX=lastTranslate.x + ev.deltaX;
if(offsetX + width*tMatrix[0] + pageWidth/2<pageWidth){
offsetX= pageWidth - width*tMatrix[0] - pageWidth/2
}
if (offsetX - pageWidth/2 > 0) {
offsetX = pageWidth/2;
}
var offsetY=lastTranslate.y + ev.deltaY;
if(offsetY + height*tMatrix[3] + pageHeight/2<pageHeight){
offsetY= pageHeight - height*tMatrix[3] - pageHeight/2
}
if (offsetY - pageHeight/2> 0) {
offsetY = pageHeight/2;
}
tMatrix[4] = offsetX
tMatrix[5] = offsetY
requestElementUpdate('onpan');
}
function onPinchStart(ev){
duration = '';
lastTranslate = point2D(tMatrix[4],tMatrix[5])//记录上一次的偏移值
initScale = tMatrix[0] || 1;
poscenter = point2D(ev.center.x, ev.center.y)
lastcenter = point2D(center.x + lastTranslate.x,center.y + lastTranslate.y)//重新计算放大后的中心坐标
poscenter = point2D(ev.center.x - lastcenter.x, ev.center.y-lastcenter.y)
console.log("center",lastcenter.x,lastcenter.y)
requestElementUpdate('onpinchStart');
}
function onPinch(ev){
var nowScale = tMatrix[0] = tMatrix[3] = (initScale * ev.scale)<halfScale?halfScale:(initScale * ev.scale);
var composscal = (1 - ev.scale)
//tMatrix[4] = poscenter.x - ((poscenter.x - lastcenter.x) * ev.scale + lastcenter.x) + lastTranslate.x//最后加上上一次的偏移值
//tMatrix[5] = poscenter.y - ((poscenter.y - lastcenter.y) * ev.scale + lastcenter.y) + lastTranslate.y
tMatrix[4] = (1 - ev.scale) * poscenter.x + lastTranslate.x
tMatrix[5] = (1 - ev.scale) * poscenter.y + lastTranslate.y
requestElementUpdate('onpinch');
}
function onDoubleTap(ev){
duration = ".3s ease all";
var nowScale = tMatrix[0];
if(nowScale != 1 || tMatrix[4]!= 0){
//scale不等于1，要重回1
tMatrix[0] = tMatrix[3] = 1;
tMatrix[4] = tMatrix[5] = 0;
}else{
var pointer = ev.center
var scale = 2
tMatrix[0] = tMatrix[3] = scale
//tMatrix[4] = pointer.x - ((pointer.x-lastcenter.x) * scale + lastcenter.x);
//tMatrix[5] = pointer.y - ((pointer.y-lastcenter.y) * scale + lastcenter.y);
tMatrix[4] = (1 - scale) * ( pointer.x - center.x)
tMatrix[5] = (1 - scale) * ( pointer.y - center.y)
}
requestElementUpdate('doubleTap');
}
function updateElementTransform() {
el.style.transition = duration
var tmp = tMatrix.join(',')
console.log(tmp)
el.style.transform = 'matrix(' + tmp + ')';
ticking = false;
}
function requestElementUpdate() {
arguments && console.log(arguments[0])
if(!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}
//图片加载事件
function loadImage(event){
pageWidth=$(window).width();
pageHeight=$(window).height();
width = event.target.naturalWidth;
height = event.target.naturalHeight;
imageScale=(pageWidth / width).toFixed(2);
halfScale=imageScale/2;
var workPointData=getData();
var html='';
for(var i=0;i<workPointData.length;i++){
html+='<div style="left:'+workPointData[i].xPos +'px;top:'+ workPointData[i].yPos+'px;position:absolute;width: 0;height: 0;line-height: 0px;z-index:0"class="site-svg-ding">'+
'<div class="phone-ding-content">'+
'<img src="phone-ding.png" width="34" height="44"/>'+
'<div class="phone-ding-txt">'+workPointData[i].count +'</div>'+
'</div>'+
'<div class="help-tip">'+
'<div class="tip-content">'+
'<div onselectstart="return false;" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">'+workPointData[i].name +'</div>'+
'</div>'+
'</div>'+
'</div>'
}
$('#scale').append(html);
tMatrix[0]=imageScale;
tMatrix[3]=imageScale;
/**
初始化设置
*/
requestElementUpdate();
}
function getData(){
var workPointData=[];
var leftTopData=[{"id":5000728,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000065,"workViewId":5000053,"workViewBgId":5000131,"left":348.78,"top":792.85,"modifyTime":null,"createTime":null,"name":"钢筋西区1","visible":1},{"id":5000729,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000066,"workViewId":5000053,"workViewBgId":5000131,"left":103.44,"top":55.29,"modifyTime":null,"createTime":null,"name":"钢筋东区","visible":0},{"id":5000730,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000067,"workViewId":5000053,"workViewBgId":5000131,"left":734.77,"top":577.83,"modifyTime":null,"createTime":null,"name":"大门","visible":0},{"id":5000734,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000068,"workViewId":5000053,"workViewBgId":5000131,"left":240.30,"top":345.05,"modifyTime":null,"createTime":null,"name":"隐藏门区","visible":0},{"id":5000738,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000073,"workViewId":5000053,"workViewBgId":5000131,"left":280.80,"top":238.68,"modifyTime":null,"createTime":null,"name":"闸机通道1","visible":1},{"id":5000740,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000075,"workViewId":5000053,"workViewBgId":5000131,"left":157.83,"top":809.79,"modifyTime":null,"createTime":null,"name":"塔吊","visible":1},{"id":5000741,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000088,"workViewId":5000053,"workViewBgId":5000131,"left":253.25,"top":165.86,"modifyTime":null,"createTime":null,"name":"AA","visible":0},{"id":5000742,"tenantId":234028821123072,"projectId":237240470392832,"workPointId":5000089,"workViewId":5000053,"workViewBgId":5000131,"left":588.53,"top":611.71,"modifyTime":null,"createTime":null,"name":"木工加工区","visible":0},{"id":5000747,"tenantId":234028821123072,"projectId":237240
hammer 对图片的拖拽 缩放
需积分: 50 18 浏览量
2019-05-07
17:02:48
上传
评论 1
收藏 644KB RAR 举报
touch-demo.rar （6个子文件） 
touch-demo 
phone-ding.png 3KB
jquery.min.js 91KB defaultPhoneBackground.png 317KB
index.html 10KB defaultPcBackground.png 293KB hammer.min.js 20KB资源评论
