Question

我想学习raphael JS的自由绘制方块。我复制了官方代码，但它不起作用，“纸张没有在第34行定义”。如何定义？该演示在http://www.irunmywebsite.com/raphael/additionalhelp.php左侧菜单“animate”上，谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Raphaël · Gear</title>
        <style type="text/css">
        body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}

</style>
        <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        var a = paper.circle(320, 100, 60).attr({fill:'#FF0000'});
a.animate({ 'translation': '0,300' }, 500, 'bounce');
var b = paper.circle(320, 100, 60).attr({fill:'#FFFF00'});;
b.animate({ cx: 320, cy: 300 }, 500, 'bounce');

var path1=paper.path("M114 253").attr({"stroke": "#f00", "stroke-width":3});

path1.animate({path: "M114 253 L 234 253"},3000,function(){
    var path2=paper.path("M234 253").attr({"stroke": "#f00","stroke-width":3});

path2.animate({path: "M234 253 L 234 134"},3000,function(){
    var path3=paper.path("M234 134").attr({"stroke": "#f00","stroke-width":3});

            path3.animate({path: "M234 134 L 97 134"},3000);
        });
    });
        </script>

    </head>
    <body>
        <div id="stroke"></div>
    </body>
</html>

Answer 1

你需要像这样设置画布“var paper = Raphael（10,50,320,200）;”。有关详细信息，请参阅Raphael documentation。

Answer 2

如果您查看HTML源代码，您将看到在window.onload中定义了var paper（第185行）。它存储了拉斐尔的一个实例。

如何在raphael JS库中定义纸张？

2 个答案: