[英]Spinning Wheel with HTML 5 canvas
我试图让这2个png图像在画布上旋转。 图像比画布大,因为我只想显示轮子在画布上旋转时的某些部分。 我将png完美地放在了画布上,它们是圆形的,并与底部对齐并居中,因此只显示了轮子的那一部分。 我在我的代码中使用easl和tween使用createjs。 由于某些原因,当我旋转图像时,它是从某个随机配准点开始执行的。 有什么办法可以使图像围绕画布区域之外的中心旋转?
var CANVAS;
var STAGE;
var CTX;
var imageCount = 0;
var img1Obj = new Image();
var img2Obj = new Image();
var img3Obj = new Image();
var img1;
var img2;
var img3;
var box;
function init(){
CANVAS = document.getElementById("spinWheel");
STAGE = new createjs.Stage(CANVAS);
CTX = CANVAS.getContext('2d');
img1Obj.src = "img/iphone_wheel_outer.png";
img2Obj.src = "img/iphone_wheel_middle.png";
img3Obj.src = "img/iphone_wheel_inner.png";
img1Obj.name = "img1";
img2Obj.name = "img2";
img3Obj.name = "img3";
img1Obj.onload = loadImages;
img2Obj.onload = loadImages;
img3Obj.onload = loadImages;
createjs.Ticker.setFPS(30);
createjs.Ticker.addListener(STAGE);
}
function loadImages(e)
{
if(e.target.name == 'img1'){img1 = new createjs.Bitmap(img1Obj); }
if(e.target.name == 'img2'){img2 = new createjs.Bitmap(img2Obj); }
if(e.target.name == 'img3'){img3 = new createjs.Bitmap(img3Obj); }
imageCount++;
/* Display graphics until all of them are loaded */
if(imageCount == 3)
{
buildInterface();
}
}
function buildInterface(){
img1.x = -370;
img2.x = -370;
img3.x = -370;
img1.y = 235;
img2.y = 235;
img3.y = 235;
createjs.Tween.get(img1,{loop:true})
.to({rotation : 360}, 2000);
STAGE.addChild(img1, img2, img3, box);
}
$(document).ready(function() {
init();
});
我终于弄明白了。
这里告诉我旋转上下文的答案是正确的,如果我使用createjs.Bitmap在画布中生成图像,那将是行不通的。 但是,使用createjs库实际上要简单得多。 我要做的就是:
img1.regX = img1.image.width/2|0;
img1.regY = img1.image.height/2|0;
实际上,这实际上直接针对位图的注册点,不需要我操纵上下文,因为createjs.Bitmap对象在内部为我处理了这一点。
仍然感谢您的帮助!
要在画布上旋转,您必须执行以下操作:
context.translate(cx, cy);
context.rotate (radians);
但是我不确定它是否可以与createjs.Bitmap对象一起使用,必须尝试一下。 平移将设置旋转点。
也许尝试:
img1.translate((.5*img1.width),(.5*img1.height));
img1.height必须工作才能正常工作。
我没有看到上面的CSS,但问题可能是transform-origin属性
链接以了解更多信息: http : //www.w3schools.com/cssref/css3_pr_transform-origin.asp
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.