[英]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.