最近公司有个新需求，做一个类似百度地图一样的功能。但不能用百度地图，而是手绘地图，然后可以像百度地图一样可以缩放，拖拽。当时在网上找了很多插件，后来找到了一个touchjs.js，但是还是有些相差的。主要是这个插件，它可以无限缩放，拖拽没有限制，这样的话，很容易导致图片拖拽出界限。这样就很难看了。

手稿推算

效果图

touchjs.js优点

轻量级

封装好了接口

touchjs.js缺点

无限制的移动

无限制的缩放

防止图片拖拽过界原理

比如，图片往下移动，如果图片顶部此时已经滑到屏幕顶部（图片与屏幕顶部重合），此时就不能再往下拖动了，当然这过程还要考虑图片的缩放。这里我通过在草稿纸上画图得出一个算法，就是要算出一个临界值。顶部限制 防止出现下滑过多公式：Hlimit = {H原-(H原*Scale)}/2，Hilimt就是临界值，超过这个值就不允许往下移动。

公式演算图

代码

//拖动

drag: function ($targetObj, callback) {

//拖动动作 drag

touch.on($targetObj, 'drag', function (ev) {

cat.touchjs.divoffsetTop = (document.getElementById("target").offsetTop);

cat.touchjs.Hbottom = (cat.touchjs.Ho+(cat.touchjs.Ho*cat.touchjs.scaleVal)-(2*cat.touchjs.clientHeight))/2;

// 顶部限制 防止出现下滑过多

cat.touchjs.Htop = parseInt((cat.touchjs.Ho - cat.touchjs.Ho*cat.touchjs.scaleVal)/2);

if(cat.touchjs.divoffsetTop >= parseInt(-cat.touchjs.Htop) && ev.y>0){

//禁止继续拖动 ,

//cat.touchjs.div这个变量是时实获取图片的top值

//Htop就是Hlimit

}else{

//继续拖动

}

});

}

明天接着讲：图片的缩放，与拖拽 （防止图片拖过屏幕底部）touch-0.2.14.min.js和demo可以找我要