Question

下面的代码没有运行，我认为这是由于行：

alert(nodes[i].getX());

我认为节点[i]超出了范围？如果是这样，为什么？

（我已经注释了很多代码来解决这个问题。基本上，代码会创建10个圆圈，然后是10条曲线，然后在带有kineticjs的画布中动画它们。）

THX！

代码：

<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
        <script>
            window.onload = function() {

                // global parameters
                var curvatureX = 10;
                var curvatureY = 10;
                var nodeRadius = 10;

                var stage = new Kinetic.Stage({
                    container: "container",
                    width: 578,
                    height: 300
                });
                var layer = new Kinetic.Layer();


                var nodes = [];

                for (i = 0;i<10;i++){
                    nodes[i] = new Kinetic.Circle({
                        x: i*20,
                        y: i*5,
                        z:1,
                        radius: nodeRadius,
                        fill: "blue",
                        stroke: "black",
                        strokeWidth: 4
                    });
                    layer.add(nodes[i]);
                    alert(nodes[i].getX()); // *** THIS ALERT DOES SHOW UP***

                }


                var edges = [];
                for (i = 0;i<10;i++){

                    edges[i]= new Kinetic.Shape({
                        drawFunc: function() {
                            var context = this.getContext();
                            context.beginPath();

                            // ***WHERE THE PROBLEM IS ***     
                            alert(nodes[i].getX()); 
                            //ALERT DOES NOT SHOW UP + BLANK SCREEN

//                            context.moveTo(nodes[i].getX(), nodes[i].getY());
//                            if (nodes[i].getY()-nodes[i+1].getY()<0){
//                                context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()-curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
//                            }
//                            else{
//                                context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()+curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
//                            
//                            }
                            context.lineWidth = 10;
                            // line color
                            context.strokeStyle = "black";
                            context.stroke();
                        },
                        fill: "#00D2FF",
                        stroke: "black",
                        strokeWidth: 4
                    });
                    layer.add(edges[i]);
                }



                stage.add(layer);

                var amplitude_1 = 100;
                var amplitude_2 = 30;
                var period = 2000;
                // in ms
                var centerX = stage.getWidth() / 2;
                var centerY = stage.getHeight() / 2;

                stage.onFrame(function(frame) {
                    for (i=0;i<nodes.length;i++){
                        nodes[i].setX(amplitude_1 * i * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
                        nodes[i].setY(amplitude_2 * i+ 20);
                    }
                    layer.draw();

                });

                stage.start();
            };

        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

Answer 1

displayed。使用a develop工具栏进行一些调试。

为什么这个变量超出了范围？ JavaScript的

1 个答案: