拉斐爾：圖形元素消失

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小提琴。你準備好了。