svg移动端拖动和缩放

最新推荐文章于 2024-08-21 08:44:15 发布

飞鸟慕鱼

最新推荐文章于 2024-08-21 08:44:15 发布

阅读量2.9k

点赞数 4

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

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

版权

本文详细介绍了如何在SVG中实现移动端的拖动和缩放功能，特别是缩放时保持中心点不变的计算方法。通过使用SVG的transform属性结合translate和scale，结合数学变换知识，实现了元素的拖拽和缩放。文章提供了计算放大倍率的公式，并解释了SVG按中心放大原理，以及如何在已放大基础上再次放大并保持中心不变的计算过程。

摘要由CSDN通过智能技术生成

注意:本文的拖动和缩放指的是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>