0

座標の位置を入力する必要があるテキストボックスがあります。その後、[設定]をクリックして、テキスト（座標）を変数cに割り当てます。そして、[描画]をクリックすると、定義された座標へのパスが描画されます。

私がやりたいのは、 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

簡単：既存のオブジェクトを更新する必要がある場合（「描画」が少なくとも1回クリックされている場合）、ユーザーが「描画」をクリックするたびに新しい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);  
}

ここにいる間、制限としてその条件を確立していない場合、ユーザーが座標に3桁の値を入力すると想定したくありません。サブ文字列を使用して入力からx/y値を取得する代わりに、次のようにします。

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

更新されたフィドル

于 2013-01-06T15:37:19.230 に答える