EaselJS，Matrix2D和包裝圖片

我做了這篇文章，詢問您對JS庫更好的意見，或者可以做我已經展示的工作。由於我不允許這樣做，所以我做了一項研究並嘗試了EaselJS來完成這項工作。所以我的問題現在已經改變了。EaselJS，Matrix2D和包裝圖片

我有這樣一段代碼：

function handleImageLoad(event) { 
    var img = event.target 
    bmp = new createjs.Bitmap(img); 

/*Matrix2D Transformation */ 
    var a = 0.880114; 
    var b = 0.0679298; 
    var c = -0.053145; 
    var d = 0.954348; 
    var tx = 37.4898; 
    var ty = -16.5202; 
    var matrix = new createjs.Matrix2D(a, b, c, d, tx, ty); 

    var polygon = new createjs.Shape(); 
    polygon.graphics.beginStroke("blue"); 
    polygon.graphics.beginBitmapFill(img, "no-repeat", matrix).moveTo(37.49, -16.52).lineTo(336.27, -36.20).lineTo(350.96, 171.30).lineTo(50.73, 169.54).lineTo(37.49, -16.52); 

    stage.addChild(polygon); 
    stage.update(); 
}

其中變量A，B，C，tx和ty是從單應性矩陣的值，

0.880114 0.067979298 37.4898 
-0.053145 0.954348 -16.5202 
-0.000344 1.0525-006 1

正如你可以在附看到文件，我很好地畫了一個變形的矩形，但圖像仍然沒有包裹創建的形狀。任何人都知道我該怎麼做？有更好的辦法呢？我做錯了什麼？

謝謝你的時間。

編輯：爲了更具體我添加了其他圖像，看看我想要什麼。

enter image description here

來源

2014-09-23 Wazhup

爲什麼你給他們評分 – 2014-09-23 19:38:33

@apsillers嗯，我看到它，這裏我的主要問題是包裝圖像。正如你所提到的那樣，繪製一個形狀並不難，但我沒有找到任何方法來使圖像適合該形狀。謝謝您的回答。 – Wazhup 2014-09-23 19:49:27

將'no-repeat'改爲'repeat'。 – user3995789 2014-09-24 17:27:15

您正在試圖做一些類似的透視變換的東西，使用3x3矩陣。

畫布的2D上下文以及擴展EaselJS僅支持具有2x3矩陣的仿射變換 - 其中邊界矩形的相對邊保持平行的變換。例如，縮放，旋轉，傾斜和平移。

http://en.wikipedia.org/wiki/Affine_transformation

您可能能夠僞造這種與已經傾斜的多個對象（這是在Flash廣泛用於假透視變換），或者您可能需要尋找到另一種解決方案。

來源

2014-10-24 06:22:27 gskinner

EaselJS，Matrix2D和包裝圖片

回答

相關問題