缩放,setState之后回到初始位置的问题"/>
react中svg平移缩放,setState之后回到初始位置的问题
svg-pan-zoom平移缩放问题
之前项目中使用了react-svg用于展示svg,svg-pan-zoom用于svg的平移缩放。最近发现当页面进行setState之后,svg后重新加载生成,造成之前平移缩放的操作失效,svg回到初始位置,记录一下方便以后查找。
svg-pan-zoom依赖包
/*** Pan to a rendered position** @param {Object} point {x: 0, y: 0}* @return {Instance} Current instance*/pan(point: Point): Instance;
/*** Pan to a rendered position* 平移到渲染的位置* @param {Object} point {x: 0, y: 0}* @return {Instance} Current instance*/pan(point: Point): Instance;/*** Get pan vector* 得到平移向量* @return {Object} {x: 0, y: 0}* @return {Instance} Current instance*/getPan(): Point;/*** Get zoom scale/level* 得到缩放尺度/水平* @return {float} zoom scale*/getZoom(): number;zoomBy(scale: number): Instance;// 将缩放级别设置为 2 //panZoomTiger.zoom(2);// 放大 130% //panZoomTiger.zoomBy(1.3);----------------------------------------------//在setState之前先获取svg的缩放尺寸和平移向量//setState完成之后设置缩放尺寸和平移向量// 获取实例let panZoomTiger = svgPanZoom('#demo-tiger');let getZoom = panZoomTiger.getZoom();let panPoints = panZoomTiger.getPan();this.setState({flag:!this.state.flag},() =>{//我的项目中svg重新生成加载了,使用panZoomTiger无效let _panZoomTiger = svgPanZoom('#demo-tiger');_panZoomTiger.zoom(getZoom );//zoomBy也可_panZoomTiger.pan(panPoints );});
项目中代码(请忽略)
<ReactSVG svgStyle={{ background: config.svgbackground, width: '99%', height: svgHeight + 'px', }}
src={path2} path={path2} ref={this.SVGRef2} />
myWebsocket.ticker.on('updateAreaYCPointData', (data) => {if (data != null) {//console.log("Diagram: ", data);let svg_Label = ReactDOM.findDOMNode(this.SVGRef2.current);let mySVG = svg_Label.querySelector('svg');if (!mySVG) {return;}var panZoomTiger = svgPanZoom(mySVG);let getZoom = panZoomTiger.getZoom();let panPoints = panZoomTiger.getPan();this.setState({flag:!this.state.flag},()=>{let svg_Label2 = ReactDOM.findDOMNode(this.SVGRef2.current);let mySVG2 = svg_Label2.querySelector('svg');let panZoomTiger2 = svgPanZoom(mySVG2);panZoomTiger2.zoom(getZoom);panZoomTiger2.pan(panPoints);this.bindingSVG(data);});}});
更多推荐
react中svg平移缩放,setState之后回到初始位置的问题
发布评论