Question

我有一个文本框，其中必须输入坐标的位置。然后点击设置，将文本（坐标）分配给变量 c 。然后单击绘制将绘制定义坐标的路径。

我想要做的是每次点击绘图时更新现有路径。但它所做的只是在点击绘制时不断创建新路径。我哪里错了？

<html>
<head>

<script src="raphael.js"></script>
<script>
var c, previous1, linepath;
var l = 5;
var x = 1;

window.onload = function(){


    set = function(){
        c = document.getElementById("b1").value;//get the co-ords
        circ();//draw circle at the select co-ord
    }

    var paper = Raphael(0,80,600,600);  


    draw = function(){  
        if (x==1){
            previous1 = "M100,100 L";
            x++;
        }else{
            previous1 = window.linepath + " ";
        }

        var new1 = previous1 + window.c;
        linepath = new1;
        var line = paper.path(linepath);

        var path = paper.text(10,l,linepath);
        path.attr({"text-anchor":"start","font-size":"12"});
        l = l+10;       
    };

    function circ(){
        var posX = c.substring(0,3);
        var posY = c.substring(4,7);
        var circl = paper.circle(posX,posY,5).attr({fill:'red',stroke:'none'});
    };


}
</script>


</head>
<body>
    Enter co-ords  >  Click Set  >  Click Draw
    <br>
    <input type="text" id="b1" value="100,400">
    <button type="button" onclick="set()">Set</button>

    <button type="button" onclick="draw()">Draw</button>

</body>
</html>

Answer 1

简单：每当用户点击“绘图”时，你需要更新现有的Raphael.path（）对象（如果已经点击了“draw”），那么你就会创建一个新的Raphael.path（）对象。 / p>

//line needs to be declared outside the function, without an initial value
if (typeof line === "undefined") {
    line = paper.path(linepath);    
} else {
  line.attr("path", linepath);  
}

当我们在这里时，如果您没有将该条件设置为限制，则不希望用户输入坐标的三位数值。不要从带有子串的输入中获取x / y值，而是执行以下操作：

var posX = parseInt(c.split(",")[0], 10);
var posY = parseInt(c.split(",")[1], 10);

updated fiddle

RaphaelJS / Javascript更新路径而不是创建新路径

1 个答案: