紡車與HTML 5帆布

林試圖讓這兩個PNG圖像只需旋轉在我的畫布。圖像比畫布大，因爲我只想顯示輪子旋轉到畫布上的某些部分。我在畫布上獲得了完美的png，它們是圓形的，並與底部對齊並居中，以便它僅顯示輪子的這一部分。我在我的代碼中使用createl和easl和補間。出於某種原因，當我旋轉我的圖像時，它從一些隨機註冊點開始。有沒有一種方法可以讓這張圖片圍繞自己的中心進行旋轉，這個中心位於畫布區域之外？紡車與HTML 5帆布

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

來源

2012-09-27 Carlos R. Batista

請向我們顯示您的代碼。 – KatieK

我終於想通了。

在這裏告訴我旋轉上下文的答案，如果即時通訊使用createjs.Bitmap產生在畫布上的圖像都沒有錯，它只是不工作。但是，使用createjs庫實際上更簡單一些。所有我需要做的就是：

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

這實際上直接針對位圖的報名點，不用我來操縱的背景下，因爲createjs.Bitmap對象負責的這個內部對我來說。

感謝您的幫助！

來源

2012-09-28 21:08:51

-2

我沒看到上面的CSS，但問題可能是變換origin屬性

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-27 17:50:19 nycynik

沒有任何CSS，一切都是通過畫布生成的：（ –

要旋轉畫布上，你有要做到以下幾點：

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

但我不知道它是否會與createjs.Bitmap對象，必須嘗試它。翻譯將設置點旋轉。

也許嘗試：

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

img1.height有這個工作工作。

來源

2012-09-27 19:21:42 nycynik

ya翻譯不會與createjs.Bitmap一起工作，因爲所有的上下文處理都是在內部發生的。 –

紡車與HTML 5帆布

回答

相關問題