Question

是否可以在html5画布中进行透视图像转换？我现在正在使用EaselJS，无法找到满足我需求的解决方案。

Answer 1

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

但你可以实现类似的外观和感觉你是否会在旅途中玩Skew和Scale。

例如，我让卡片在平面度上移动，这为卡片提供了透视图：

＆＃13;

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

＆＃13;

#exampleScene {
    position: absolute;
}

＆＃13;

<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>

＆＃13;

Answer 2

我还没有尝试过easel.js，但是每个图像转换都是通过矩阵运算完成的：平移，旋转，倾斜等。在easel.js源代码上看，有一个Matrix2D类，它的文档：http://www.createjs.com/Docs/EaselJS/Matrix2D.html。要进行透视转换，您需要使用rotation，scaling和skewing。您只需要玩最适合您需求的值和测试。

EaselJS透视图像转换

2 个答案: