Question

抱歉这可能是一个非常愚蠢的问题，但我正在尝试学习如何使用KineticJS并尝试修改教程（http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/）以使用静态图像而不是形状。为了它的价值，我正试图为Glenn Beck的PNG制作动画片以使其旋转（无论是在这里还是在那里）。

到目前为止，我已经弄乱了一堆错误，但我一直陷入“未捕获的TypeError：对象＃没有方法'onFrame'”

我在SO和其他网站上阅读了有关对象/方法的多个问题，虽然我想我明白了问题所在，但我不确定如何修复它：

object Object has no method

JavaScript object has no method

contains is object has no method?

根据我的理解，“无方法”错误意味着没有可用的函数被调用..？当然，在动力学中存在“onFrame”，但是？我试着查看Kinetic文档，看看他们是否更改了3.8.X（教程）和4.X（我正在使用的库）之间的名称，但它看起来并不像它们那样。

这是我的代码：

<head>
    <script src="http://test.XXXXX.com/js/kinetic-v4.3.2.js"></script>
    <script>
        function animate(animatedLayer, beck, frame){
            var canvas = animatedLayer.getCanvas();
            var context = animatedLayer.getContext();

            // update
            var angularFriction = 0.2;
            var angularVelocityChange = beck.angularVelocity * frame.timeDiff * (1 - angularFriction) /     1000;
            beck.angularVelocity -= angularVelocityChange;

            if (beck.controlled) {
                beck.angularVelocity = (beck.rotation - beck.lastRotation) * 1000 / frame.timeDiff;
                beck.lastRotation = beck.rotation;
            }
            else {
                beck.rotate(frame.timeDiff * beck.angularVelocity / 1000);
                beck.lastRotation = beck.rotation;
            }

            // draw
            animatedLayer.draw();
        }

        window.onload = function(){
            console.log('stage =', stage); // DEBUG
            var stage = new Kinetic.Stage({ container: "container", width: 240, height: 320 });
            console.log('stage =', stage); // DEBUG
            var backgroundLayer = new Kinetic.Layer();
            var animatedLayer = new Kinetic.Layer();


            var beck = new Image();
              beck.onload = function() {

                    var beck = new Kinetic.Image({
                      x: 240,
                      y: stage.getHeight() / 2 - 59,
                      image: beckHead,
                      width: 150,
                      height: 230
                    });
                beckHead.src = "http://test.XXXXX.com/i/beckhead.png";
                animatedLayer.add(beck);
             };



            stage.on("mousedown", function(evt){
                this.angularVelocity = 0;
                this.controlled = true;
            });

            // add listeners to container
            stage.on("mouseup", function(){
                beck.controlled = false;
            }, false);

            stage.on("mouseout", function(){
                beck.controlled = false;
            }, false);

            stage.on("mousemove", function(){
                if (beck.controlled) {

                    var mousePos = stage.getMousePosition();
                    var x = (stage.width / 2) - mousePos.x;
                    var y = (stage.height / 2) - mousePos.y;
                    beck.rotation = 0.5 * Math.PI + Math.atan(y / x);

                    if (mousePos.x <= stage.width / 2) {
                        beck.rotation += Math.PI;
                    }
                }
            }, false);


            stage.add(backgroundLayer);
            stage.add(animatedLayer);

            // draw background
            var context = backgroundLayer.getContext();
            context.save();
            context.beginPath();
            context.moveTo(stage.width / 2, stage.height / 2);
            context.lineTo(stage.width / 2, stage.height);
            context.strokeStyle = "#555";
            context.lineWidth = 4;
            context.stroke();
            context.restore();

            stage.onFrame(function(frame){
            console.log("onFrame fired")
                animate(animatedLayer, beck, frame);
            });


            stage.start();
        };
    </script>
</head>
<body onmousedown="return false;">
    <div id="container"><canvas id="container"></canvas>
    </div>

</body>

Answer 1

这是使用版本3.8.4的过时示例

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.8.4.js">

，目前的版本是＆gt; 4.3

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>

当前版本没有Stage＃onFrame和Stage＃start等方法。

您可以使用此示例http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/作为基础，然后添加stage.on（“mouseup / down / move / out”）以捕捉鼠标移动并影响动画。

完美的答案是将旧示例转换为新版本，我将来可能会尝试。

object没有onFrame方法

1 个答案: