svg平移缩放

svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手势操作,需要先安装Hammer.js。

这里简单示范下核心代码,首先在index.html添加相应的js文件:

  <script src="assets/libs/svg-map/js/lib/hammer.min.js"></script>
  <script src="assets/libs/svg-map/js/lib/svg-pan-zoom.min.js"></script>

html中有这样一个svg标签:

<svg id="svggroup"><svg>

然后实现方法:查找该id元素并调用svgPanZoom初始化,最后在页面加载后调用此方法即可:

initZoomPan(){
    const eventsHandler = {
      haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel']
    , init: function(options) {
        var instance = options.instance
          , initialScale = 1
          , pannedX = 0
          , pannedY = 0
        // Init Hammer
        // Listen only for pointer and touch events
        this.hammer = Hammer(options.svgElement, {
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
        })
        // Enable pinch
        this.hammer.get('pinch').set({enable: true})
        // Handle double tap
        this.hammer.on('doubletap', function(ev){
          instance.zoomIn()
        })
        // Handle pan
        this.hammer.on('panstart panmove', function(ev){
          // On pan start reset panned variables
          if (ev.type === 'panstart') {
            pannedX = 0
            pannedY = 0
          }
          // Pan only the difference
          instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
          pannedX = ev.deltaX
          pannedY = ev.deltaY
        })
        // Handle pinch
        this.hammer.on('pinchstart pinchmove', function(ev){
          // On pinch start remember initial zoom
          if (ev.type === 'pinchstart') {
            initialScale = instance.getZoom()
            instance.zoom(initialScale * ev.scale)
          }
          instance.zoom(initialScale * ev.scale)
        })
        // Prevent moving the page on some devices when panning over SVG
        options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
      }
    , destroy: function(){
        this.hammer.destroy()
      }
    }
    const element = document.querySelector('#svggroup');
    svgPanZoom(element, {
      zoomEnabled: true,
      controlIconsEnabled: true,
      dblClickZoomEnabled: false,
      fit: 1,
      center: 1, 
      customEventsHandler: eventsHandler
    });
  }

注:至此其实已经完工了的,但貌似有个bug——配置选项有个参数controlIconsEnabled: false用于控制工具栏是否显示的,而我用时发现无效果,所以做了额外处理:

let a = document.getElementById('svg-pan-zoom-controls');
if(a){
   a.remove();
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mukekeheart的iOS之旅

iOS项目——基本框架搭建

项目开发过程中,在完成iOS项目——项目开发环境搭建之后,我们首先需要考虑的就是我们的项目的整体框架与导航架构设计,然后在这个基础上考虑功能模块的完成。 一 ...

4468
来自专栏hotqin888的专栏

golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1912
来自专栏IMWeb前端团队

用Flux实现TodoMVC

本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github 下载。...

2065
来自专栏逆向技术

win32程序之子窗口编程

  在前边我们已经讲解了窗口的本质.以及如何注册窗口类跟创建窗口. 还讲了消息循环.

2282
来自专栏Pythonista

博客园css样式代码

文章有一个好的排版,将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引...

3912
来自专栏云知识学习

k8s 节点亲和性

这里的背景是遇到了一个小问题:我目前有3台机器(1台ssd+40m 带宽高性能),有些服务对网络、机器都有较大的要求,而其他一些则没有,请问我如何才能让特定服务...

8560
来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

2756
来自专栏pangguoming

c#以POST方式模拟提交表单

这是我一年前写的一个用C#模拟以POST方式提交表单的代码,现在记录在下面,以免忘记咯。那时候刚学C#~忽忽。。很生疏。。代码看上去也很幼稚 臃肿不堪 #reg...

3329
来自专栏圣杰的专栏

ABP入门系列(5)——展现层实现增删改查

这一章节将通过完善Controller、View、ViewModel,来实现展现层的增删改查。最终实现效果如下图: ? 一、定义Controller ABP对A...

2605
来自专栏林德熙的博客

win10 17025 触摸bug

This article is written in both English and Chinese. 本文使用中文和英文两个版本。 在 win10 的 1...

781

扫码关注云+社区

领取腾讯云代金券