3

我试图让这 2 个 png 图像在我的画布上简单地旋转。图像比画布大，因为我只想在轮子旋转到画布时显示轮子的某些部分。我在画布上完美地得到了 png，它们是圆形的，与底部对齐并居中，因此它只显示轮子的那个部分。我在我的代码中使用 createjs 和 easl 和 tween。出于某种原因，当我旋转图像时，它会从某个随机注册点进行旋转。有没有办法让这个图像围绕它自己的中心旋转，它不在画布区域？

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();
});
4

3 回答 3

1

我终于弄明白了。

这里告诉我旋转上下文的答案没有错，如果我使用 createjs.Bitmap 在画布中生成图像，它只是不起作用。但是，使用 createjs 库实际上要简单得多。我所要做的就是：

img1.regX   = img1.image.width/2|0;
img1.regY   = img1.image.height/2|0;

这实际上直接针对位图的注册点，我无需操作上下文，因为 createjs.Bitmap 对象在内部为我处理了这个问题。

无论如何感谢您的帮助！

于 2012-09-28T21:08:51.747 回答
0

要在画布上旋转，您必须执行以下操作：

context.translate(cx, cy);
context.rotate   (radians);

但我不确定它是否适用于 createjs.Bitmap 对象，必须尝试一下。平移将设置点旋转。

也许尝试：

img1.translate((.5*img1.width),(.5*img1.height));

img1.height 必须为此工作。

于 2012-09-27T19:21:42.523 回答
-2

我没有看到上面的 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 */
}
于 2012-09-27T17:50:19.213 回答