vue JS 中使用PS导出的SVG 进行坐标转PS，对某个点设置成可视区中心

曹某在搬砖

已于 2023-04-19 18:32:45 修改

阅读量196

点赞数

文章标签： javascript vue.js 前端

于 2023-04-19 18:32:27 首次发布

本文链接：https://blog.youkuaiyun.com/C_jian_/article/details/130250447

版权

该代码段用于将SVG图层中的某个坐标点调整到屏幕可视区的中间。首先获取SVG的viewBox尺寸和屏幕尺寸，然后计算坐标点相对于屏幕的偏移量，再通过CSS的transform属性进行缩放和定位，使坐标点位于视口中心。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机上操作SVG，想要对某一个坐标点在屏幕可视区的中间显示
代码如下

			//SVG图层的大小
			const viewBoxWidth = 13269;
            const viewBoxHeight = 7475;
            //屏幕宽高（svg宽高）
            const svgWidth = window.innerWidth;
            const svgHeight = window.innerHeight;
            //this.viewFocusObj  坐标点
            let pX = this.viewFocusObj.x / viewBoxWidth * svgWidth;
            let pY = this.viewFocusObj.y / viewBoxHeight * svgHeight;
            var clientRect = document.querySelector('svg').getBoundingClientRect()
            //坐标点转换后PX，对PX中心点的偏移量
            var x1 = -pX + clientRect.width / 2
            var y1 = -pY + clientRect.height / 2
            // return { viewX:x1*3 ,viewY:y1}
            // scale(3) 是SVG缩放的比例  没需求可以不要  （*3）
            svg.style.transform = 'scale(3)'
            svg.style.left = `${x1 * 3}px`;
            svg.style.top = `${y1}px`