拉斐爾：圖形元素消失

Question

我開始擺弄Raphael，但有一個我無法解決的問題：

出於測試目的，我正在嘗試一種簡化的方案：在給定位置添加一個圓，並為x和y使用兩個輸入字段。

圓圈將出現一秒鍾，然后消失。 它發生在chrome和FF中（未在其他產品上嘗試過）

我有這個HTML

<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]); 例如，您可以在這里查看其工作方式。

因此，您可以嘗試使用此標記作為起點：

    <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);
}

您可以看到它正在處理這種提琴。 您就可以出發了。