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

RaphaelJS/Javascript update path instead of creating new one

本文关键字：创建 Javascript 更新 路径 RaphaelJS      更新时间：2023-09-26

我有一个文本框，其中必须输入坐标的位置。然后通过点击Set，文本(坐标)被分配给变量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>

简单:每次用户单击"draw"时，当您需要更新现有对象(如果"draw"已被单击至少一次)时，您将创建一个新的拉斐尔.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);

更新小提琴

相关文章：