svg移动端拖动和缩放

最新推荐文章于 2024-05-11 10:57:12 发布

飞鸟慕鱼

最新推荐文章于 2024-05-11 10:57:12 发布

阅读量2.9k

点赞数 4

分类专栏：前端文章标签： svg

本文链接：https://blog.csdn.net/qq_34759481/article/details/107905147

版权

注意:本文的拖动和缩放指的是svg本身的位置不变，但是对里面的元素进行拖拽和缩放

svg的拖动和缩放主要运用的就是svg的transform属性，操作里面的translate和scale就可以了，就是计算方面要用到一些数学变换的知识。

1.缩放比拖动要麻烦很多，先实现拖动，直接看下面的例子。注意测试的时候要换成手机模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg{
      width: 600px;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <svg  id="svg" xmlns="http://www.w3.org/2000/svg">
    <rect id="rect" x="100" y="100" width="200" height="100" style="stroke:black;fill:none;stroke-width:1px" transform="translate(0,0),scale(1)"></rect>
  </svg>

  <script>
    
    var svg = document.getElementById("svg");
    var rect = document.getElementById("rect");

    svg.ontouchstart = function(e){
      // 记录手指按下的位置
      let startX = e.touches[0].clientX;
      let startY = e.touches[0].clientY;

      // 获取rect的transform属性
      let transform = rect.getAttribute("transform");
      // 获取transform属性的内部的值
      let result = /translate\(([0-9\.-]+),([0-9\.-]+)\),scale\(([0-9\.-]+)\)/.exec(transform);
      let x = result[1];
      let y = result[2];
      let z = result[3];
      
      svg.ontouchmove = function(e){
        // 记录每次移动后手指的位置
        let endX = e.touches[0].clientX;
        let endY = e.touches[0].clientY;
        // 计算移动差值
        let moveX = endX - startX;
        let moveY = endY - startY;
        // 设置rect的transform的值
        rect.setAttribute("transform","translate(" + (parseFloat(x)+moveX) + "," + (parseFloat(y)+moveY) + "),scale(" + z + ")")
      }

    }
  </script>

</body>
</html>

2.缩放+拖动，先上例子，由于我无法在google浏览器上进行双指操作，所以只能用在手机上运行

<!DOCTYPE htm

最低0.47元/天解锁文章

飞鸟慕鱼

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
svg移动端拖动和缩放

注意:本文的拖动和缩放指的是svg本身的位置不变，但是对里面的元素进行拖拽和缩放svg的拖动和缩放主要运用的就是svg的transform属性，操作里面的translate和scale就可以了，就是计算方面要用到一些数学变换的知识。1.缩放比拖动要麻烦很多，先实现拖动，直接看下面的例子。注意测试的时候要换成手机模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫