EaselJS 투시 이미지 변환

Question

html5 캔버스에서 투시 이미지 변환이 가능합니까? 저는 지금 당장 EaselJS를 사용하고 있으며 내 필요에 대한 해결책을 찾을 수 없습니다.

Answer 1

나는 easel.js를 아직 시도하지 않았지만 모든 이미지 변환은 행렬 작업 (변환, 회전, 비뚤어 짐 등)으로 수행됩니다. easel.js 소스 코드를 보면 Matrix2D 클래스가 있고 문서는 다음과 같습니다. 그것 : http://www.createjs.com/Docs/EaselJS/Matrix2D.html. 원근감 변환의 경우 rotation, scaling 및 skewing을 사용해야합니다. 당신은 자신의 요구에 가장 적합한 가치와 함께 플레이하고 테스트해야합니다.

Answer 2

원근감 변환을 수행하려면 3D로 개체를 변환하는 옵션이 필요하지만 CreateJS/EaselJS가 2D 변환 행렬을 사용하는 한 그렇게 할 수 없습니다.

이동 중에 Skew and Scale을 사용하면 비슷한 모양을 얻을 수 있습니다. &

var aspectRatio = 1.777777777777778; 
 
var canvasHeight, canvasWidth, canvasTop, canvasLeft; 
 
var graphicsLoader; 
 
var stage, frameTick; 
 

 

 
var calculateSize = function() { 
 
    if ((window.innerWidth/window.innerHeight) >= aspectRatio) { 
 
    canvasHeight = window.innerHeight; 
 
    canvasWidth = canvasHeight * aspectRatio; 
 
    canvasTop = 0; 
 
    canvasLeft = (window.innerWidth - canvasWidth)/2; 
 
    } else { 
 
    canvasWidth = window.innerWidth; 
 
    canvasHeight = canvasWidth/aspectRatio; 
 
    canvasLeft = 0; 
 
    canvasTop = (window.innerHeight - canvasHeight)/2; 
 
    } 
 

 
    var gameCanvas = document.getElementById('exampleScene'); 
 
    gameCanvas.style.width = canvasWidth + "px"; 
 
    gameCanvas.style.height = canvasHeight + "px"; 
 
    gameCanvas.style.top = canvasTop + "px"; 
 
    gameCanvas.style.left = canvasLeft + "px"; 
 
}; 
 

 

 
//load graphics 
 
graphicsManifet = [ 
 
    {id: "flatness", src: "https://i.imgur.com/6E1NKLa.png"}, 
 
    {id: "card", src: "https://i.imgur.com/CXhpG1X.png"}, 
 
]; 
 

 
graphicsLoader = new createjs.LoadQueue(true); 
 
graphicsLoader.loadManifest(graphicsManifet); 
 
graphicsLoader.on("complete", function() { 
 
    initScene(); 
 
}, this); 
 

 

 
function initScene() { 
 
    
 
    stage = new createjs.Stage("exampleScene"); 
 
    createjs.Ticker.on("tick", frameTick); 
 
    
 
    //draw 
 
    var flatness = new createjs.Bitmap(graphicsLoader.getResult("flatness")); 
 
     flatness.x = 200; 
 
    
 
    var card = new createjs.Bitmap(graphicsLoader.getResult("card")); 
 
     card.alpha = 0; 
 
     
 
    
 
    stage.addChild(
 
    flatness, 
 
    card 
 
); 
 
    
 
    var animationTime = intervalTime = 800; 
 
    
 
    
 
    createjs.Tween.get() 
 
    .wait(0) 
 
    .call(function() { 
 
     movePerspective(card, 280, 10, 0); 
 
     card.alpha = 1; 
 
    }) 
 
    .wait(intervalTime) 
 
    .call(function() { 
 
     movePerspective(card, 1530, 10, animationTime); 
 
     card.alpha = 1; 
 
    }) 
 
    .wait(intervalTime) 
 
    .call(function() { 
 
     movePerspective(card, 1570, 680, animationTime); 
 
     card.alpha = 1; 
 
    }) 
 
    .wait(intervalTime) 
 
    .call(function() { 
 
     movePerspective(card, 230, 680, animationTime); 
 
     card.alpha = 1; 
 
    }) 
 
    .wait(intervalTime) 
 
    .call(function() { 
 
     movePerspective(card, 280, 10, animationTime); 
 
     card.alpha = 1; 
 
    }).loop = true; 
 
    
 
    
 
    
 
}; 
 

 

 
function frameTick(e) { 
 
    stage.update(e); 
 
} 
 

 
movePerspective = function(object, x, y, time) { 
 
    typeof time != "number" ? time = 1000 : ""; 
 
    var scales = { 
 
     y: y, 
 
     scaleX : 0.887073905 + y*0.000142045, // this numbers I calculated depending 
 
     scaleY : 0.761221624 + y*0.000284091 // on perspective angle of flatness board 
 
    }; 
 
    var skAspect = 0.00673453853 - y * 0.000000654928977; 
 
    var cardSkewX = (6.5991 - skAspect * x); 
 
    var pointskew = { 
 
     x: x, 
 
     skewX: cardSkewX 
 
    }; 
 

 
    createjs.Tween.get(object).to({ 
 
     x: pointskew.x, 
 
     y: scales.y, 
 
     skewX: pointskew.skewX, 
 
     scaleX: scales.scaleX, 
 
     scaleY: scales.scaleY 
 
    }, time, createjs.Ease.getPowInOut(3)); 
 
}; 
 

 

 
window.onload = function() { 
 
    window.addEventListener("resize", function() { 
 
    calculateSize(); 
 
    }); 
 
}; 
 

 
//set framerate 
 
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED; 
 
createjs.Ticker.framerate = 60; 
 

 
$(function() { 
 
    calculateSize(); 
 
});

#exampleScene { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
 
<canvas id="exampleScene" width="1920" height="1080"></canvas>

---