使用 onclick 绘制 SVG 路径

Question

我是 javascript 的新手，我尝试使用鼠标事件绘制路径。我遇到了 2 个大问题：

I want to create via 4 mouseclick on the fram a path. But i dont understand why my path look very strange. Why it do not look like the points of my mouse events. How can i create path who look like my mouse events?

我这样试：

<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>

Answer 1

clientX 和 clientY 坐标是浏览器 window 坐标。您需要将它们转换为 svg 坐标。 getScreenCTM() 函数 returns 一个变换矩阵，用于将 svg 坐标转换为 window 坐标。使用此矩阵的逆矩阵将 window 坐标转换为 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");

使用 onclick 绘制 SVG 路径

SVG draw path with onclick

javascript

svg

onclick

svg-path