Javascript 对象在框架上没有方法_Javascript_Methods_Kineticjs

Javascript 对象在框架上没有方法

javascript methods

Javascript 对象在框架上没有方法,javascript,methods,kineticjs,Javascript,Methods,Kineticjs,很抱歉，这可能是一个非常愚蠢的问题，但我正在尝试学习如何使用KineticJS，并尝试修改教程（）以使用静态图像而不是形状。不管它值多少钱，我正在尝试制作格伦·贝克头部的PNG动画，使其旋转（无论是在这里还是那里）到目前为止，我已经克服了一系列错误，但我一直坚持使用“uncaughttypeerror:Object”没有方法“onFrame” 我在SO和其他网站上阅读了关于对象/方法的多个问题，虽然我认为我理解问题所在，但我不确定如何解决它：据我所知，“无方法”错误意味着没有可调用的函

很抱歉，这可能是一个非常愚蠢的问题，但我正在尝试学习如何使用KineticJS，并尝试修改教程（）以使用静态图像而不是形状。不管它值多少钱，我正在尝试制作格伦·贝克头部的PNG动画，使其旋转（无论是在这里还是那里）

到目前为止，我已经克服了一系列错误，但我一直坚持使用“uncaughttypeerror:Object”没有方法“onFrame”

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

据我所知，“无方法”错误意味着没有可调用的函数。。？当然“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>


函数animate（animatedLayer、beck、frame）{
var canvas=animatedLayer.getCanvas（）；
var context=animatedLayer.getContext（）；
//更新
var Angular摩擦力=0.2；
var angularVelocityChange=beck.angularVelocity*frame.timeDiff*（1-角度摩擦力）/1000；
贝克角速度-=角速度变化；
如果（贝克控制）{
beck.angularVelocity=（beck.rotation-beck.lastRotation）*1000/帧时间差；
beck.lastRotation=beck.rotation；
}
否则{
转向旋转（帧时间差*转向角速度/1000）；
beck.lastRotation=beck.rotation；
}
//画
animatedLayer.draw（）；
}
window.onload=函数（）{
console.log（'stage='，stage）；//调试
var stage=新的动能级（{容器：“容器”，宽度：240，高度：320}）；
console.log（'stage='，stage）；//调试
var backgroundLayer=新的dynamic.Layer（）；
var animatedLayer=新的动能.Layer（）；
var beck=新图像（）；
beck.onload=函数（）{
var beck=新的动力学图像({
x:240，
y:stage.getHeight（）/2-59，
图片：贝克海德，
宽度：150，
身高：230
});
beckHead.src=”http://test.XXXXX.com/i/beckhead.png";
动画层。添加（贝克）；
};
舞台打开（“鼠标向下”，功能（evt）{
这个角速度=0；
这是真的；
});
//将侦听器添加到容器
stage.on（“mouseup”，function（））{
beck.controlled=false；
}，假）；
stage.on（“mouseout”，function（））{
beck.controlled=false；
}，假）；
stage.on（“mousemove”，function（））{
如果（贝克控制）{
var mousePos=stage.getMousePosition（）；
var x=（stage.width/2）-mousePos.x；
变量y=（stage.height/2）-mousePos.y；
beck.rotation=0.5*Math.PI+Math.atan（y/x）；
如果（mousePos.x这是使用版本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等方法
您可以使用此示例作为基础，然后添加stage.on（“mouseup/down/move/out”）以捕捉鼠标移动并影响动画
完美的答案是将旧示例转换为新版本，我以后可能会尝试。
示例似乎已经更新。我想作者会听你的。哈哈！谢谢你的帮助！：D