hammer实现拖动旋转和缩放

最新推荐文章于 2023-05-29 17:08:41 发布

kongjunchao159

最新推荐文章于 2023-05-29 17:08:41 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： hammer

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/47317105

hammer 专栏收录该内容

1 篇文章

订阅专栏

该示例演示了如何利用Hammer.js库，在网页中实现图片的拖动、旋转和缩放功能。通过监听'touch'、'drag'和'transform'事件，实时更新图片的位置、旋转角度和缩放比例，并应用CSS3的transform属性来完成视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1 , maximum-scale=1">
<script type="text/javascript" src="hammer.min.js"></script>
<style>
body{padding:0; overflow:hidden;}
#pinchzoom{overflow:hidden; width:300px; height:300px; background-color:#eee;}
</style>
</head>
<body>
<div id="pinchzoom">
    <img id="img" src="http://pr.bdimg.com/static/princess/img/misc/baidu_logo_c352a179.gif" ondragstart="return false" alt="" />
</div>
<script>
var hammertime = Hammer(document.getElementById('pinchzoom'),{
    transform_always_block:true,
    transform_min_scale:0.5,
    drag_block_horizontal:true,
    drag_block_vertical:true,
    drag_min_distance:0
});

var img = document.getElementById('img');
//初始值
var posX = 0,
    posY = 0,
    last_posX,
    last_posY,
    scale = 1,
    last_scale,
    rotation = 0,
    last_rotation;

hammertime.on('touch drag transform',function(e){
    switch(e.type){
        //当touch开始时，记录下当前的缩放量，旋转量和位移量
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;
            last_posX = posX;
            last_posY = posY;
            break;
        //拖拽时改变位移量
        case 'drag':
            posX = last_posX + e.gesture.deltaX;
            posY = last_posY + e.gesture.deltaY;
            break;
        case 'transform':
            rotation = last_rotation + e.gesture.rotation;
            scale = Math.min(last_scale* e.gesture.scale,10);
            break;
    }
    //使用CSS3 transform进行图片的变换
    var transform = "translate3d("+posX+"px,"+posY+"px,0)"+"scale3d("+scale+","+scale+",1)"+"rotate("+rotation+"deg)";
    img.style.webkitTransform = transform;
})
</script>
</body>
</html>