使用onclick绘制SVG路径

SVG draw path with onclick

本文关键字：路径 SVG 绘制 onclick 使用      更新时间：2023-09-26

我是javascript的新手，我尝试用mouseevents绘制一条路径。我遇到了两个大问题：

我想通过4个鼠标点击在框架上创建一个路径。但我没有明白为什么我的路看起来很奇怪。为什么它看起来不像鼠标事件的点。我如何才能创造出一条像我一样的道路鼠标事件？

我试着不喜欢这个：

<script type="text/ecmascript">
  window.onload = function () {
  };
    var xArry = new Array(); 
    var yArry = new Array();
    var path = document.getElementById('pathId');
    function clicked(evt){  
            xArry.push(evt.clientX);
            yArry.push(evt.clientY);
            if(xArry.length < 4 && yArry.length < 4){
                console.log("length x y  "+xArry[0]+" "+yArry[0]);
            }else if(xArry.length ==4 && yArry.length == 4){
                console.log(" Else if: length x y  "+xArry[0]+" "+yArry[0]);
                drawSVG(xArry,yArry);
            }else{
                xArry = new Array(); // x und y punkte
                yArry = new Array();
            }

    }
    var drawSVG = function (xArryTmp,yArryTmp) {
        var a;
        var b;
        var c;
        var d;
        a = xArryTmp[0]+" "+yArryTmp[0];
        b = xArryTmp[1]+" "+yArryTmp[1];
        c = xArryTmp[2]+" "+yArryTmp[2];
        d = xArryTmp[3]+" "+yArryTmp[3];
        var pathTmp = "M"+a+" L"+b+" L"+c+" L"+d+" Z";
        alert(pathTmp); 
        var newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");    
        newpath.setAttributeNS(null, "d", pathTmp);
        document.getElementById("svgid").appendChild(newpath);           
        return null;                                 
    };

</script>
</head>
<body>
 <svg id = "svgid" height="600" width="600" onclick="clicked(evt)">
  <path id = "pathId" />
  <rect id="rect1" width="600" height="600"
            style="stroke:#000000; fill:none;"/>
</svg> 

</body>
</html>

我还有第二个问题。如何将CSS集成到我的javscript创建路径中？因为我想让这条路变得崎岖。像这样：

<style>
        .draggable {
            cursor: move;
        }
</style>

客户端X和客户端Y坐标是浏览器窗口坐标。您需要将它们转换为svg坐标。getScreenCTM（）函数返回一个转换矩阵，用于将svg坐标转换为窗口坐标。使用此矩阵的倒数将窗口坐标转换为svg坐标。

在单击函数的示例中，您可以替换。。。

xArry.push(evt.clientX);
yArry.push(evt.clientY);

与。。。

var svg = document.getElementById("svgid");
var point = svg.createSVGPoint();
point.x = evt.clientX;
point.y = evt.clientY;
point = point.matrixTransform(svg.getScreenCTM().inverse());
xArry.push(point.x);
yArry.push(point.y);

要使用可拖动样式，需要设置class属性。在drawSVG函数的示例中，您可以添加。。。

newpath.setAttributeNS(null, "class", "draggable");
相关文章：