Kinetic.js/HTML5通过“旋转”围绕中心旋转图像；抵销；不起作用
使用Kinetic/html5-我试图通过“偏移”使图像围绕其中心旋转，但它不起作用。下面是小代码段。。（它只是拒绝围绕img1的中心旋转！）非常感谢Kinetic.js/HTML5通过“旋转”围绕中心旋转图像；抵销；不起作用,html,kineticjs,Html,Kineticjs,使用Kinetic/html5-我试图通过“偏移”使图像围绕其中心旋转，但它不起作用。下面是小代码段。。（它只是拒绝围绕img1的中心旋转！）非常感谢 <!DOCTYPE HTML> <html> <head> <!-- Kinetic Tutorials: Image http://www.html5canvastutorials.com/kineticjs/html5-canvas-
<!DOCTYPE HTML>
<html>
<head>
<!--
Kinetic Tutorials:
Image http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
Rotation http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/
http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
-->
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container" style="position:fixed;top:0px;left:0px;"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
var img1 = new Image();
img1.onload = function() {
var Gear1 = new Kinetic.Image({
x: 0,
y: 0,
image: img1,
width: 50,
height: 50,
offset: [25,25] /* This is supposed to shift center of rotation to middle of img1, but it's not working!? */
});
layer.add(Gear1);
stage.add(layer);
var angularSpeed = 360 / 3;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
Gear1.rotate(angleDiff);
}, layer);
anim.start();
};
img1.src = 'Gear.jpg';
</script>
</body>
</html>
身体{
边际：0px；
填充：0px；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：200，
身高：200
});
var layer=新的动能层（）；
var img1=新图像（）；
img1.onload=函数（）{
var Gear1=新的动力学图像({
x:0,，
y:0，
图片：img1，
宽度：50，
身高：50，
偏移量：[25,25]/*应该将旋转中心移到img1的中间，但它不工作*/
});
层。添加（齿轮1）；
阶段。添加（层）；
var角速度=360/3；
var anim=新的动能动画（函数（帧）{
var angleDiff=帧时间差*角速度/1000；
齿轮1.旋转（角度差）；
}，层）；
anim.start（）；
};
img1.src='Gear.jpg'；
offset: {x:25,y:25}