Question

我只是想使用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>

Answer 1

将您的脚本移至<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之后调用它可确保元素已准备好与之交互。

Answer 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>

享受并祝你好运！

Answer 3

@JuanMendes它有点令人困惑，最终问题是在DOM准备好之前调用了js函数，elemets仍在创建中。我建议使用$(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准备就绪后执行脚本。

P.S。另外，如果您想要操作动态创建的内容，则需要使用绑定操作将事件处理程序作为单击，模糊，悬停等附加，以便注册事件。例如：

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

})

您可以在以下位置查看文档的绑定： http://api.jquery.com/on/ 和.ready（）在： http://api.jquery.com/ready/

图形不显示

3 个答案: