0

我是 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>
4

1 回答 1

0

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

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

newpath.setAttributeNS(null, "class", "draggable");
于 2016-05-19T11:30:48.743 回答