Javascript 使用Rapha&xEB；从jQuery调用_Javascript_Jquery_Raphael

Javascript 使用Rapha&xEB；从jQuery调用

javascript jquery

Javascript 使用Rapha&xEB；从jQuery调用,javascript,jquery,raphael,Javascript,Jquery,Raphael,我正在尝试创建一个基于用户输入绘制图形的简单应用程序。我正在使用Raphaël和jQuery。我想让用户在表单上输入，然后绘制SVG图形。我遇到的问题是，当我从jQuery click事件中调用draw函数时，SVG对象会闪烁然后消失。下面有一个MWE。（也许可以更简单一些。）我如何确保按钮单击后图形仍保留在那里 <!doctype html> <html> <head> <title>Example</title> <meta

我正在尝试创建一个基于用户输入绘制图形的简单应用程序。我正在使用Raphaël和jQuery。我想让用户在表单上输入，然后绘制SVG图形。我遇到的问题是，当我从jQuery click事件中调用draw函数时，SVG对象会闪烁然后消失。下面有一个MWE。（也许可以更简单一些。）我如何确保按钮单击后图形仍保留在那里

<!doctype html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.4/themes/base/jquery-ui.css" />
<script type="text/javascript" src="raphael-min.js"></script>
</head>
<body>

<form>
<button id="generate-button">Generate</button>
</form>

<div id="canvas"/>

<script>
function CustomObject() {
    this.draw = function() {
        // Creates canvas 320 × 200 at 10, 50
        paper = Raphael("canvas", 100, 100 );

        boundary = window.paper.rect( 5, 5, 25, 25 );
        boundary.attr("stroke-dasharray" , "--" );

        // Creates circle at x = 50, y = 40, with radius 10
        circle = paper.circle(50, 40, 10);
        // Sets the fill attribute of the circle to red (#f00)
        circle.attr("fill", "#f00");

        // Sets the stroke attribute of the circle to white
        circle.attr("stroke", "#fff");
    }
}

var plot = new CustomObject();
// plot.draw(); // if I call it here, the scene is drawn "normally"

$( "#generate-button" )
    .button()
        .click(function() {
            plot.draw(); // when I call it here, the SVG flickers and disappears
        });

</script>
</body>
</html>


例子
生成
函数CustomObject（）{
this.draw=函数（）{
//在10,50处创建画布320×200
纸=拉斐尔（“画布”，100100）；
边界=window.paper.rect（5,5,25,25）；
attr（“stroke dasharray”，“--”）；
//在x=50、y=40处创建半径为10的圆
圆圈=纸张。圆圈（50,40,10）；
//将圆的填充属性设置为红色（#f00）
圆圈.attr（“填充”，“#f00”）；
//将圆的笔划属性设置为白色
圆圈.attr（“笔划”，“#fff”）；
}
}
var plot=new CustomObject（）；
//plot.draw（）；//如果我称之为这里，场景是“正常”绘制的
$（“#生成按钮”）
.按钮（）
。单击（函数（）{
plot.draw（）；//当我在这里调用它时，SVG会闪烁并消失
});

按钮的默认类型是submit，当在表单中时，将尝试提交表单

单击处理程序正在执行，然后提交导致闪烁的表单

将按钮从窗体中取出或从单击事件处理程序返回false，因为这将禁用浏览器的默认操作。

您确定只发生一次单击事件吗？是的。如果我在.click（）处理程序中放入警报，它只会弹出一次。