roh*_*_vg 0 javascript updates raphael
我有一个文本框,其中必须输入坐标的位置.然后通过单击Set,将文本(坐标)分配给变量c.然后单击Draw绘制定义坐标的路径.
我想要做的是每次单击Draw时更新现有路径.但它所做的只是在我点击Draw时不断创建新的路径.我哪里错了？
这是FIDDLE
<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>
简单:每当用户点击"绘图"时,你需要更新现有的Raphael.path()对象(如果已经点击了"draw"),你就会创建一个新的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);
| 归档时间： |
|
| 查看次数： |
3300 次 |
| 最近记录： |