0

Raphaelをいじり始めていますが、解決できない問題があります。

テストの目的で、単純化されたシナリオを試しています。xとyに2つの入力フィールドを使用して、特定の場所に円を追加します。

円はほんの一瞬表示され、その後消えます。それはクロムと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();}

簡単でバカかもしれないと思いますが、見えません。よろしくお願いします！

4

1 に答える 1

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

あなたはそれがこのフィドルで働いているのを見ることができます。そして、あなたは行く準備ができています。

于 2013-01-20T15:47:01.213 に答える