Beautifl - Flash Gallery

Thumbnail : Autofiting a textfield to height and TextLineMetrics visualized
Autofiting a textfield to height and TextLineMetrics visualized
majoraze 2014-07-11 MIT License

再生するにはFlash Playerが必要です。デスクトップのブラウザでご覧ください。

package {
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.geom.Rectangle;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextLineMetrics;
    public class TextFieldTest extends Sprite {
        private var b1:Box; private var b2:Box;
        private var bg:Shape;private var g:Graphics;
        public function TextFieldTest() 
        {
            SW = stage.stageWidth;SH = stage.stageHeight;
            // BG
            bg = new Shape();addChild( bg );bg.graphics.beginFill(0);bg.graphics.drawRect(0, 0, SW, SH);bg.graphics.endFill();
            // UI GRAPHICS 
            var ui:Shape = new Shape();addChild( ui );g = ui.graphics;
            // TOP DRAG BOX 
            b1 = new Box(0xF5AE0A,50,190, onResize);addChild(b1);b1.x = 15;b1.y = 190;
            // BOTTOM DRAG BOX 
            b2 = new Box(0xF1630E,205, SH - 25, onResize);addChild(b2);b2.x = 15;b2.y = 245;
            
            
            
            
            text = new TextField();
            addChild( text );
            text.text = "TextField 14";
            text.autoSize = "left";
            text.wordWrap = text.multiline = text.selectable = false;
            
            tf = new TextFormat("Helvetica", 14, 0xFFFFFF, true);
            text.defaultTextFormat = tf;
            text.setTextFormat( tf );
                
            textHeight = text.getBounds(this).height;
            
            onResize();
        }
        
        private var text:TextField; 
        private var tf:TextFormat;        
        private var textHeight:Number;        
        private function onResize():void
        {
            text.x = b1.x + 40;
            text.y = b1.y;            
            var height:Number = b2.y - b1.y;
            text.scaleX = text.scaleY = height / textHeight;           
            text.text = text.scaleY.toFixed(1) + " Text";
            /*
            //while ( text.textHeight < height ) 
            while ( text.getBounds(this).height < height ) 
            {
                //tf.size = Number(tf.size) + 1;
               
                //text.defaultTextFormat = tf;
                //text.setTextFormat( tf );
               
                text.scaleY = text.scaleX = text.scaleY + 0.1;
            }           
            //while ( text.textHeight > height ) 
            while ( text.getBounds(this).height > height ) 
            {               
                //tf.size = Number(tf.size) - 1.6;                
                //text.defaultTextFormat = tf;
                //text.setTextFormat( tf );                
                text.scaleY = text.scaleX = text.scaleY - 0.1;
            }
            */            
            //text.text = String(tf.size) + " Text";            
            //text.text = text.height.toFixed() + ' , ' + text.textHeight.toFixed() + " , " + height.toFixed();            
            var tm:TextLineMetrics = text.getLineMetrics(0);
            var s:Number = text.scaleX;           
            // http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextLineMetrics.html            
            var p2xGutter:Number = +2 * s;            
            g.clear();                        
            // LINE HEIGHT - GREEN            
            g.lineStyle(1, 0x45E01F); 
            g.moveTo(b1.x + 16, p2xGutter + b1.y);
            g.lineTo(b1.x + 16, p2xGutter + b1.y + s * tm.height);         
            // ASCENT - SKY COLOR         
            g.lineStyle(1, 0x18E7BD);
            g.moveTo(b1.x + 22, p2xGutter + b1.y);
            g.lineTo(b1.x + 22, p2xGutter + b1.y + s * tm.ascent);          
            // DESCENT - PURPLE
            
            g.lineStyle(1, 0xD817E8);
            g.moveTo(b1.x + 26, p2xGutter + b1.y + s * tm.ascent);        
            g.lineTo(b1.x + 26, p2xGutter + b1.y + s * tm.ascent + s * tm.descent);            
            // LEADING - BLUE            
            g.lineStyle(1, 0x156AEA);
            g.moveTo(b1.x + 30, p2xGutter + b1.y + s * tm.ascent + s * tm.descent);        
            g.lineTo(b1.x + 30, p2xGutter + b1.y + s * tm.ascent + s * tm.descent + s * tm.leading);            
            // TextLineMetrics.x value - YELLOW ( don't ask - i don't know why it's not working )            
            g.lineStyle(1, 0xEEF248); 
            g.moveTo(text.x + tm.x, 0);        
            g.lineTo(text.x + tm.x, SH);
            // BOUNDS - RED
            var r:Rectangle = text.getBounds(this);
            g.lineStyle(1, 0xFF0000);
            g.drawRect(r.x, r.y, r.width, r.height);
            // textWidth and textHeight - White 
            g.lineStyle(1, 0xFFFFFF);
            g.drawRect(text.x, text.y, text.textWidth, text.textHeight);
        }
    }
}
import flash.display.Sprite;
class Box extends Sprite {
    private var min:Number;
    private var max:Number;
    private var onDrag:Function = null;
    private var color:uint = 0x0;
    private var limitColor:uint = 0xFF0000;
     
/// 0 : no limit, -1 : up, +1, down
public function setLimit( limit:int ):void
{
        
        graphics.beginFill( limit == 0 ? color : limitColor );
        graphics.drawRoundRect(-10, -10, 20, 20, 7);
        graphics.endFill();
        graphics.beginFill(0xFFFFFF);
       
        if( limit < 0 ) 
        {
            graphics.moveTo( 0, -5 );
            graphics.lineTo( 5, 2 );
            graphics.lineTo( -5, 2 );
            graphics.lineTo( 0, -5 );
        }
       
        else if ( limit > 0 ) 
        {
            graphics.moveTo( 0, 5 );
            graphics.lineTo( 5, -2 );
            graphics.lineTo( -5, -2 );
            graphics.lineTo( 0, 5 );
        }
        else graphics.drawCircle(0, 0, 5);
        graphics.endFill();
}
    public function Box( color:uint = 0xFF8000, min:Number = NaN, max:Number = NaN, onDrag:Function = null ) 
    {
        this.color = color;
        this.min = min;
        this.max = max;
        this.onDrag = onDrag;
        
        scaleX = scaleY = 1.4;
        setLimit( 0 );
        useHandCursor = buttonMode = true;
        addEventListener("addedToStage", function(e:*= null):void
        {        
            addEventListener("mouseDown", 
                function(e:*= null):void {
                    addEventListener("enterFrame", drag);
            });
            stage.addEventListener("mouseUp",
                function(e:*= null):void {
                    removeEventListener("enterFrame", drag);
            });
        });
    }
    private function drag(e:*= null):void
    {
        scaleX = scaleY = 1.4; y = stage.mouseY;
        if ( !isNaN( min ) && y < min ) 
        {
            y = min;
            scaleX = scaleY = 1;
            setLimit( 1 );
        }
        else if ( !isNaN( max ) && y > max ) 
        {
            y = max;
            scaleX = scaleY = 1;
            setLimit( -1 );
        }
        else 
        {
          setLimit( 0 );  
        }
        if ( onDrag != null ) 
            onDrag();
    }
}
var SW:int = 465;
var SH:int = 465;