Question

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

我想在fram路径上通过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>

Answer 1

clientX和clientY坐标是浏览器窗口坐标。您需要将它们转换为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");

SVG使用onclick绘制路径

1 个答案: