flash - このレイアウトは何と呼ばれていますか？それを達成するためのアイデア？

Question

http://www.uniqlo.com/utzoom/

これがarと呼ばれるレイアウト/配置の種類を知っている人はいますか?

このようなランダムで動的なものを作成する方法はありますか?

Answer 1

Flex では、画像操作を使用して目的の効果を実現できます。http : //www.insideria.com/2008/03/image-manipulation-in-flex.html を参照してください。

private var original:BitmapData;
private static const MAX_WIDTH:uint = 2880;
private static var MAX_HEIGHT:uint = 2880;


private function loadImage(url:String):void
{
 var request:URLRequest = new URLRequest(url);

    var imageLoader:Loader = new Loader();
 imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, image_completeHandler);
    // add other listeners here
    imageLoader.load(request)
}

private function image_completeHandler(event:Event):void
{
    var bmd:BitmapData = Bitmap(event.currentTarget.content).bitmapData;

    var originalWidth:Number = bmd.width;
    var originalHeight:Number = bmd.height;
    var newWidth:Number = originalWidth;
    var newHeight:Number = originalHeight;

    var m:Matrix = new Matrix();

    var scaleX:Number = 1;
    var scaleY:Number = 1;

    if (originalWidth > MAX_WIDTH || originalHeight > MAX_HEIGHT)
    {
        sx =  MAX_WIDTH / originalWidth;
        sy = MAX_HEIGHT / originalHeight;
        var scale:Number = Math.min(sx, sy);
        newWidth = originalWidth * scale;
        newHeight = originalHeight * scale; 
    }
    m.scale(scale, scale);
    original = new BitmapData( newWidth, , newHeight); 

    original.draw(bmd, m);

}

回転 マトリックスを使用して画像を回転するには、適切なパラメーターを使用して新しいマトリックスを作成します。

var q:Number  = 30 * Math.PI / 180 // 30 degrees in radians

var m:Matrix = new Matrix(Math.cos(q), Math.sin(q), -1 * Math.sin(q), Math.cos(q));

//or as a shortcut use the rotate method

var m:Matrix = new Matrix();

m.rotate(q) ;

Flash Player で何かを回転すると、基準点を中心に回転します。デフォルトでは、これは左上隅です。別のポイントを中心に回転させたい場合は、負の方向にオフセットする必要があります。回転を行ってから、元の場所に戻します。

var m:Matrix = new Matrix();

// rotate around the center of the image

var centerX:Number = image.width / 2;

var centerY:Number = image.height /2;

m.translate(-1 * centerX, -1 * centerY);

m.rotate(q);

m.translate(centerX, centrerY);

反転 画像を反転するには、2 段階のプロセスがあります。最初のステップは、現在の scaleX および/または scaleY に -1 を掛けることで、2 番目のステップは x と y の位置を調整することです。反転してイメージすると、基準点は変化せず、反対方向に描画されます。補正するには、x 位置を幅で、y 位置を高さで変更する必要があります。

var m:Matrix = new Matrix();

m.scale(-1, 0); // flip horizontal assuming that scaleX is currently 1

m.translate(image.width, 0); // move its x position by its width to put it in the upper left corner again