actionscript-3 - 度/ラジアンに基づいて一辺が傾いた長方形を描く

Question

長方形の片側を取り、度/角度に基づいて側面を歪めようとしています。

Answer 1

私はあなたのためにいくつかのコードを作成しました
。質問があれば聞いてください。

import flash.geom.Matrix;

var temp_matrix = new Matrix();

var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x000000);
square.graphics.drawRect(0,0,200,100);
square.graphics.endFill();

var angle:Number = -10; // the angle of degrees
temp_matrix.b = Math.PI * 2 * angle / 360;// y skew
//temp_matrix.c = Math.PI * 2 * angle / 360;// x skew

var sourceMatrix:Matrix = square.transform.matrix;// get existing matrix
sourceMatrix.concat(temp_matrix); // apply skew to existing matrix
square.transform.matrix = temp_matrix;// assign the new skew

square.x = 100
square.y = 100

【2回戦】

var trapezium:Sprite = new Sprite();
addChild(trapezium);
trapezium.x = 100;
trapezium.y = 100;

var dir:Boolean = true;
var side:Boolean = true;
var angle:Number = 0; // the angle of degrees
var w:Number = 300;
var h:Number = 80;


var timer:Timer = new Timer(16);
timer.addEventListener( TimerEvent.TIMER, tick );
timer.start();

function tick(e:TimerEvent):void{
    var radians:Number = Math.PI/180*angle;
    trapezium.graphics.clear();
    trapezium.graphics.beginFill(0x000000)
    if( side){
        // long side is right side
        trapezium.graphics.lineTo(w,0);
        trapezium.graphics.lineTo(w,radians*w+h);
        trapezium.graphics.lineTo(0,h);
        trapezium.graphics.lineTo(0,0);
    }else{
        trapezium.graphics.lineTo(w,0);
        trapezium.graphics.lineTo(w,h);
        trapezium.graphics.lineTo(0,radians*w+h);
        trapezium.graphics.lineTo(0,0);
    }
    trapezium.graphics.endFill();
    if(angle>=10){
        dir = false;
    }
    if(angle<=0){
        dir = true;
    }
    if(dir){
        angle = angle+.2;
    }else{
        angle = angle-.2;
    }
    if( Math.floor(angle*10) <= 0 ){
        side = !side;
    }
}

Answer 2

角度のタンジェントを取り、長方形の幅を掛けて、下軸のデルタ y を取得します。

[x1,y1] を四角形の原点として (変化することはありません)

[x1+length, y1+deltaY] を右下隅として

Answer 3

AS はわかりませんが、編集後は、頂点で塗りつぶされたポリゴンのように見えます。

P0 =(X0, Y0)
P1 = (X1, Y0)
if Angle >= 0 then
  P2 = (X1, Y1)
  P3 = (X0, Y1 + (X1-X0) * Tan(Angle))
else
  P2 = (X1, Y1 - (X1-X0) * Tan(Angle))
  P3 = (X0, Y1)