Utilizzando una 4x4 3DMatrix in AS3 per inclinare immagini

Question

Ho un'immagine bitmap AS3 che desidero per inclinare in questo modo:

Vorrei solo per inclinare la parte inferiore dell'immagine, e lasciare la parte superiore da sola. Sulla base delle mie ricerche che ho fatto finora, sembra che vorrei usare la classe Matrix3D, ma non sono abbastanza sicuro su come implementarlo efficacemente.

Grazie ad una risposta di seguito, l'articolo è una risorsa eccellente per capire la classe Matrix3D con una matrice 3x3: http://www.senocular.com/flash/tutorials/transformmatrix/ Tuttavia impressionante come quella tutorial è, esso non prevede la possibilità di inclinare l'immagine sopra. Quello che sto cercando è un tutorial simile su come usare una matrice 4x4. Tutto quello che vorrei sapere è dove mettere i numeri nella matrice, e dovrei essere in grado di capire tutto il resto.

Ecco qualche esempio di codice su quello che ho ottenuto così per:

var tempLoader:Loader=new Loader(); 
var tempBitmap:Bitmap; 
var fattenTheBottom:Number; 
tempLoader.load(new URLRequest("image.png")); 
tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,castBitmap); 
function castBitmap(e:Event):void 
{ 
    tempLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE,castBitmap); 
    tempBitmap = Bitmap(tempLoader.content); 
    // Make the image into a trapezoid here using fattenTheBottom 
    addChild(tempBitmap); 
} 

Ogni consiglio è meravigliosamente apprezzato!

Answer 1

Se volete un modo rapido utilizzando Matrix3D, ecco un esempio del tipo di valori si dovrebbe usare:

var m3d:Matrix3D = new Matrix3D(Vector.<Number>([ 
    1, 0, 0, 0, 
    0, 1.15, 0.25, 0.00005, 
    0, 0, 1, 0, 
    0, 0, 0, 1 
])); 
tempBitmap.transform.matrix3D = m3d; 

Ma presto si noterà che questo approccio distorce l'immagine in modi che non lo fai volere. Ad esempio, sarà in orizzontale spremere l'immagine su un lato (come si desidera), ma il contenuto dell'immagine sarà allungato in verticale anche. Difficile da spiegare, ma una volta provato il metodo sopra, noterai come l'immagine viene allungata verticalmente.

Lo stesso tipo di effetto può essere ottenuto utilizzando rotationX combinato con PerspectiveProjection e scaleY.

Se si desidera una soluzione più elegante, sia nel codice che nei risultati di immagini, provare DistortImage. Il metodo non è diretto (usa una mesh di immagini secondarie), ma ha grandi risultati.

Answer 2

Posso solo raccomandare di leggere le migliori informazioni unica che io abbia mai trovato su questo:
Understanding the Transformation Matrix

Leggendo questo, credo, si potrebbe davvero capire tutto su matrice di trasformazione. Viene da Flash 8 (AS2), ma le sue informazioni teoriche serviranno anche usando AS3.