需求:做机房平面图,用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. C#获取当前程序集的完整路径

    //获取当前程序集的完整路径加上EXE的名称 string binPath = Assembly.GetExecutingAssembly().Location; Console.WriteLine( ...

  2. 微信小程序 没有找到node_modules目录 ，小程序引入vant框架报错。

    如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: ...

  3. 2019.4.18 HTML + CSS相关整理

    目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...

  4. ORC Files

    ORC 全称是Optimized Row Columnar,意思是优化的RC file,优化行列式. ORC 文件格式提供了一个很高效的方式来存储hive数据.它旨在克服其他hive文件格式的限制.当 ...

  5. SpringBoot + Quartz定时任务示例

    程序文件结构,如下图,后面详细列出各文件的代码: 1. maven的pom.xml文件如下: <project xmlns="http://maven.apache.org/POM/4 ...

  6. Python+Selenium之cannot focus element 解决方法

    有时候刚进入页面输入第一个值时脚本会报错:cannot focus element 贴下我的脚本和解决办法供大家参考 我原本的脚本是: WebDriverWait(driver,15,0.5).unt ...

  7. uvm_cmdline_processor

    无意中看到uvm_cmdline_processor,之前使用+UVM_TESTNAME也没深究,现在记录一下 内部调用脚本中的参数,通过使用uvm_cmdline_processor可以从脚本层级, ...

  8. git笔记四

    git log --graph --oneline 中的--oneline相当于 --pretty=oneline但是可以显示更短小的id git reset --hard HEAD^ git res ...

  9. JSONP原理及简单实现

    在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们 ...

  10. Ubuntu下伪分布式模式Hadoop的安装及配置

    1.Hadoop运行模式Hadoop有三种运行模式,分别如下:单机(非分布式)模式伪分布式(用不同进程模仿分布式运行中的各类节点)模式完全分布式模式注:前两种可以在单机运行,最后一种用于真实的集群环境 ...