对象没有方法 onFrame答案

【问题标题】：object has no method onFrame对象没有方法 onFrame
【发布时间】：2013-02-09 05:05:51
【问题描述】：

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

到目前为止，我已经搞砸了一堆错误，但我一直卡在“未捕获的 TypeError：Object# has no method 'onFrame'”

我在 SO 和其他网站上阅读了多个关于对象/方法的问题，虽然我认为我理解问题所在，但我不知道如何解决它：

object Object has no method

JavaScript object has no method

contains is object has no method?

据我了解，“无方法”错误意味着没有可调用的函数..？当然，“onFrame”存在于 Kinetic 内部，但..？我尝试查看 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>

【问题讨论】：

例子好像更新了。我觉得作者听你的。
哈哈！谢谢您的帮助！ :D

标签： javascript methods kineticjs

【解决方案1】：

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

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

，当前版本>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") 以捕捉鼠标移动并影响动画。

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

【讨论】：