EaselJS 透视图像变换

Question

是否可以在html5画布中进行透视图像转换？我现在正在使用 EaselJS，但找不到适合我需要的解决方案。

Answer 1

要实现透视变换，您需要一个选项以在 3D 中平移对象，但就 CreateJS/EaselJS 使用 2D 变换矩阵而言，您无法做到。

但如果您在旅途中使用 Skew 和 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>

---

Answer 2

我还没有尝试过画架.js，但是每个图像转换都是通过矩阵操作完成的：平移、旋转、倾斜等。查看画架.js 源代码有一个Matrix2D 类，以及文档给它：http://www.createjs.com/Docs/EaselJS/Matrix2D.html。对于透视变换，您需要使用rotation、scaling 和skewing。您只需要使用最适合您需求的值和测试。