微信h5用js操作图片的缩放与拖拽 防止图片拖过界限
最近公司有个新需求，做一个类似百度地图一样的功能。但不能用百度地图，而是手绘地图，然后可以像百度地图一样可以缩放，拖拽。当时在网上找了很多插件，后来找到了一个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可以找我要