0

我有一个必须输入坐标位置的文本框。然后通过单击Set，将文本（坐标）分配给变量c。单击Draw会绘制一条到定义坐标的路径。

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

这是小提琴

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

1 回答 1

6

简单：每次用户单击“绘图”时，您都在创建一个新的 Raphael.path() 对象，而您需要更新现有对象（如果至少已经单击了一次“绘图”）。

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

更新的小提琴

于 2013-01-06T15:37:19.230 回答