python处理svg 平移 旋转_svg平移缩放

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

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

html中有这样一个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();

}