2

我只是想使用 Javascript Library Raphael 创建一些简单的矢量图形。应该有一个方形对象和一个弯曲对象，但没有显示任何内容。谁能帮我。谢谢你。

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript"> //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>
4

3 回答 3

3

将您的脚本移动到<div id="sample-2" style="width:500px; height:500px;">标签之后

或者有些人更喜欢使用 onload 处理程序，为了简单起见使用 jQuery

$(function(){
    // Your code that runs after the DOM is loaded
});

关键是您的代码正在访问 DOM，并且它需要在 DOM 构建后运行。从 onload 处理程序或在您使用的 DIV 之后调用它可确保元素已准备好与之交互。

于 2012-07-17T19:44:41.307 回答
2

您运行 Javascript 太早了。您的浏览器将在读取 Javascript 时运行它，如果尚未加载 DOM 元素，它不会执行任何操作。

尝试这个：

<html>
    <head>
        <script src="raphael.js"></script>
        <script src="jquery-1.7.2.js"></script>
    </head>

    <body>
        <div id="sample-2" style="width:500px; height:500px;"></div>
        <script type="text/javascript">
            //all your javascript goes here  
            var paper = Raphael("sample-2", 200, 100);
            var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
            var curvePath = paper.path("M110,10s55,25 40,80Z");

            rectPath.attr({
                fill: "green"
            });
            curvePath.attr({
                fill: "blue"
            });
        </script>
    </body>
</html>

享受和好运！

于 2012-07-17T19:46:34.833 回答
1

@JuanMendes 有点令人困惑，最后的问题是在 DOM 准备好之前调用了 js 函数，仍在创建元素。我建议使用$(document).ready(function(){})，以便仅在创建 DOM 后执行脚本。我只是再次解释，因为他在问他为什么必须这样做。例如，如果他这样做：

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){ //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
}
)
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>

该脚本应该可以工作，因为该脚本是在 DOM 准备好之后执行的。

PS 附带说明一下，如果您想操作动态创建的内容，您需要将事件处理程序附加为单击、模糊、悬停等......使用绑定操作以便注册事件。例子：

$('#form').on('blur', '#input', function(){
 // code

})

您可以在http://api.jquery.com/on/ 和 .ready() 上 查看绑定文档： http: //api.jquery.com/ready/

于 2012-07-17T21:38:02.847 回答