需求:做机房平面图,用svg实现拖拽和缩放,刚开始一头雾水,不知所措,好在皇天不负有心人........

本文重点介绍拖拽,单纯实现很简单,但是由于vue项目,机房图有很多事件,拖拽就成了难点

简单介绍下缩放实现技术要点:1.获取Svg当前缩放比例--------documen.getElementById("SVG").currentScale

放大:
documen.getElementById("SVG").currentScale = documen.getElementById("SVG").currentScale1.5
缩小:
documen.getElementById("SVG").currentScale = documen.getElementById("SVG").currentScale0.5

接下来拖拽,时间有限,自己体会去吧

要点介绍:

 1.这个请自行学习下Matrix矩阵: transform="matrix(1 0 0 1 0 0)"
 2.想拖拽谁,就在谁那里调用 : onmousedown="selectElement(evt)"
<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<style>
    <style>
    .draggable {
        cursor: move;
    }
    svg{background:pink;}
</style>

</style>
<body>
<svg
      transform="matrix(1 0 0 1 0 0)"
      onmousedown="selectElement(evt)"
      viewBox="0 0 400 300"
      width="400" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect class="draggable"
      transform="matrix(1 0 0 1 0 0)"
      onmousedown="selectElement(evt)"
      x="0" y="0"
      width="80" height="80"
      fill="blue"/>
</svg>
</body>
<script type="text/javascript">
  var selectedElement = 0;
  var currentX = 0;
  var currentY = 0;
  var currentMatrix = 0;
  function selectElement(evt) {
    selectedElement = evt.target;
    currentX = evt.clientX;
    currentY = evt.clientY;
    console.log(currentX,currentY);
    currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');

      for(var i=0; i<currentMatrix.length; i++) {
        currentMatrix[i] = parseFloat(currentMatrix[i]);
      }
    selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
    selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
  }
  function moveElement(evt){
  console.log(evt.clientX,evt.clientY);
  console.log(currentX,currentY);
  dx = evt.clientX - currentX;
  dy = evt.clientY - currentY;
  currentMatrix[4] += dx;
  currentMatrix[5] += dy;
  newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

  selectedElement.setAttributeNS(null, "transform", newMatrix);
  currentX = evt.clientX;
  currentY = evt.clientY;
}
function deselectElement(evt){
  if(selectedElement != 0){
    selectedElement.removeAttributeNS(null, "onmousemove");
    selectedElement.removeAttributeNS(null, "onmouseout");
    selectedElement.removeAttributeNS(null, "onmouseup");
    selectedElement = 0;
  }
}
</script>
</html>

难点补充:

嵌入vue项目,貌似selectedElement.setAttributeNS(null, "", "");不好使

1.请尝试绑定方法:
    selectedElement.addEventListener("mousemove", this.moveElement(event), false);
2.记得执行完解绑:
    selectedElement.addEventListener("mouseup", (event) => {
        selectedElement.removeEventListener("mousemove", this.moveElement(event), false);
    }, false);

其他,请自行理解,有补充请留言.....

svg拖拽和缩放的更多相关文章

  1. Winform图片拖拽与缩放

    最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个 ...

  2. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  3. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  4. JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  5. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

  6. vue组件实现图片的拖拽和缩放

    vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...

  7. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  8. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

  9. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

随机推荐

  1. celery简单理解和使用

    解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...

  2. 对django的理解

    http://www.cnblogs.com/chongdongxiaoyu/p/9403399.html https://blog.csdn.net/weixin_42134789/article/ ...

  3. SLIP—串行线路上传输数据报的非标准协议

    目录 SLIP-串行线路上传输数据报的非标准协议 简介 历史 实用性 协议 不足之处 SLIP驱动程序 做了这么多年的程序员后,总想资源回收一下,写一点点什么,却又发现无从写起. SLIP-串行线路上 ...

  4. [SCOI2018]游泳池（计算几何＋分数规划＋最大权闭合子图）

    题目链接 https://www.luogu.org/problemnew/show/U56187 注:题面参考了网上的其他博客,并非原题题面,因此数据范围可能有误.数据为原创数据. 题解 其实就是许 ...

  5. datatables传参

    前段时间需要修改一个项目.是拿datatables渲染的.然后需要做一个筛选.找各种文档想各种方法很麻烦.最后硬是用原生方式撸下来了. 首先他原来页面 可以看到是通过ajax方式请求了数据.那么其实筛 ...

  6. 使用FCM服务

    1.建谷歌账号 2.在console上新建应用 https://console.firebase.google.com 并下载私钥.json 3.创建测试网页应用 (或app应用) C#服务端: 用H ...

  7. 【Excel】数据字典制作

    以下是设计的一种新的数据字典!!! 在Excle中新建2个sheet页,分别是:[主页]与[数据字典] 1.主页内容 E5对应的公式如下:=HYPERLINK("#'数据字典'!C" ...

  8. (转)python之os,sys模块详解

    python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...

  9. 再探display:table-cell &&左边固定、右边自适应

    display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明. 1. 父元素display:table-cell,并设置verticle-al ...

  10. Js框架设计之DomReady

    一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2. ...