拉斐尔：图形元素消失

Question

我开始与拉斐尔摆弄，但我有一个问题我解决不了：

用于测试目的我想一个简化的场景： 在给定的位置添加了一圈，对x和y使用两个输入字段。

圆圈会出现几分之一秒，然后消失。它发生在Chrome和FF（没试过别人）

我有这个网站

<div id="canvas_container"></div> 
x<input id="cx" /><br/> 
y<input id="cy" /><br/> 
<button onclick="see(document.getElementById('cx').value,document.getElementById('cy').value)">Populate</button> 

和这个js

var paper; 
window.onload = function() {paper = new Raphael(document.getElementById('canvas_container'), 1000, 1000); 
} 

function see(x, y) { 

    alert("coords " + x + " " + y); 
var fino = paper.circle(x, y, 20).attr({ 
    stroke: 'none', 
    fill: '#f60' 
}).toFront();} 

我敢肯定，这将是很容易的东西，也许愚蠢，但我看不到它 在此先感谢！

Answer 1

首先。我建议你不要使用内联JavaScript，最好是以不同的方式定义事件监听器。在下一个小提琴中，我用的方法也不是最好的。您可以使用target.addEventListener(type, listener[, useCapture]);，例如，您可以使用here来查看它的工作原理。

所以，你可以尝试像一个起点使用这个标记：

<div id="canvas_container"></div> 
    <lable>x</lable> 
    <input id="cx" /><br/> 
    <lable>y</lable> 
    <input id="cy" /><br/> 
    <button id="button">Populate</button> 

而且这个JS：

var paper; 
paper = new Raphael(document.getElementById('canvas_container'), 1000, 1000) 

function see(x, y) { 
    alert("coords " + x + " " + y); 
    var fino = paper.circle(x, y, 20).attr({ 
     stroke: 'none', 
     fill: '#f60' 
    }) 

} 

var button = document.getElementById('button'); 

button.onclick = function(){ 
    var x = document.getElementById('cx').value; 
    var y = document.getElementById('cy').value; 
    see(x,y); 
} 

你可以看到它的工作在this小提琴。你准备好了。