svg translate 操作

最新推荐文章于 2024-05-16 09:13:08 发布

最新推荐文章于 2024-05-16 09:13:08 发布 · 408 阅读

本文介绍了一种使用JavaScript实现SVG元素拖动的方法。通过监听鼠标事件并利用SVGDOM接口来更新元素的位置，实现了平滑的拖动效果。文中详细解释了如何创建变换对象、应用缩放和平移操作。

部署运行你感兴趣的模型镜像

		function dragElement(evt) {
            var target = evt.target;
            var id = target.id;
            var dx = evt.dx, dy = evt.dy;
            var scale = svgcanvas.scale();
            
            var transformBaseVal = target.transform.baseVal;
            
            if(transformBaseVal.numberOfItems == 0){
                var transformObject = svgRoot.createSVGTransform();
                transformBaseVal.appendItem(transformObject);
            }
            
            var transformItem = transformBaseVal.getItem(0);
            var transformMatrix = transformItem.matrix;
            
            var ox = transformMatrix.e, oy = transformMatrix.f;
    
            var x = ox + dx / scale, y = oy + dy / scale;
    
            log("scale:" + scale + ",offset:" + dx / scale + "," + dy / scale);
    
            transformItem.setTranslate(x,y);
        }
	}

您可能感兴趣的与本文相关的镜像