0

我开始摆弄拉斐尔，但我有一个无法解决的问题：

出于测试目的，我正在尝试一个简化的场景：在给定位置添加一个圆圈，使用 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();}

我敢肯定这会很容易而且可能很愚蠢，但我看不到它提前谢谢！

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 回答