flex 学习笔记 as自定义标尺组件

代码：

package contr
{
    import flash.geom.Point;

    import mx.controls.Alert;
    import mx.controls.Text;
    import mx.graphics.SolidColorStroke;

    import spark.components.BorderContainer;
    import spark.primitives.Line;

    public class Ruler extends BorderContainer
    {
        private var _trunkLine:Line;

        /**设置标尺的长度*/
        private var _lineLength:Number;

        /**设置最小单位*/
        private var _spacing:Number;

        /**设置隔几个刻度显示一次*/
        private var _scale:Number;

        /**标尺是横向还是纵向*/
        private var _type:String = "horizontal";

        /**标尺的位置,包括上下左右*/
        private var _position:String = "top";

        [Inspectable(enumeration="top,bottom,left,right")]
        public function get position():String
        {
            return _position;
        }

        public function set position(value:String):void
        {
            _position = value;
        }

        public function get scale():Number
        {
            return _scale;
        }

        public function set scale(value:Number):void
        {
            _scale = value;
        }

        public function get spacing():Number
        {
            return _spacing;
        }

        public function set spacing(value:Number):void
        {
            _spacing = value;
        }

        [Inspectable(enumeration="vertical,horizontal")]
        public function get type():String
        {
            return _type;
        }

        public function set type(value:String):void
        {
            _type = value;
        }
        public function Ruler()
        {
            super();

        }

        public function get lineLength():Number
        {
            return _lineLength;
        }

        public function set lineLength(value:Number):void
        {
            _lineLength = value;
        }



        protected override function createChildren():void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            this.alpha = 0.5;
            this.setStyle("borderColor","red");
            this.width = 0;
            this.height = 0;
            _trunkLine = new Line();
            _trunkLine.stroke = new SolidColorStroke(0x000000);
            this.x = 0;
            this.y = 0;
            if(position == "top"){
                _trunkLine.xFrom = 25;
                _trunkLine.yFrom = 25;
            }else if(position == "bottom"){
                _trunkLine.xFrom = 25;
                _trunkLine.yFrom = parentApplication.height-100;
            }else if(position == "left"){
                _trunkLine.xFrom = 25;
                _trunkLine.yFrom = 25;
            }else if(position == "right"){
                _trunkLine.xFrom = 600;
                _trunkLine.yFrom = 25;
            }
            if(type =="horizontal"){
                _trunkLine_trunkLine.xTo = _trunkLine.xFrom + lineLength;
                _trunkLine_trunkLine.yTo = _trunkLine.yFrom;
                this.addElement(_trunkLine);
                for(var i:Number=0;i<=lineLength/spacing;i++){
                var _line:Line = new Line();
                var _ySpacing:Number = 5;
                _line.stroke = new SolidColorStroke(0x000000);
                _line.xFrom = i * spacing + _trunkLine.xFrom;
                _line.yFrom = _trunkLine.yFrom;
                _line_line.xTo = _line.xFrom;
                var _label:spark.components.Label = new spark.components.Label();
                _label.text = String(i * 10);
                _label.y = _trunkLine.yFrom - 20;
                if(i%10==0){
                    _ySpacing = 15;
                }else if(i%5==0){
                    _ySpacing = 10;
                }
                if(i%scale==0){
                    _label.x = i * spacing + _trunkLine.xFrom+1;
                    this.addElement(_label);
                }
                _line.yTo = _trunkLine.yFrom - _ySpacing;
                this.addElement(_line);
                }
            }else{
                _trunkLine = new Line();
                _trunkLine.stroke = new SolidColorStroke(0x000000);
                _trunkLine_trunkLine.xTo = _trunkLine.xFrom;
                _trunkLine_trunkLine.yTo = _trunkLine.yFrom + lineLength;
                this.addElement(_trunkLine);

                for(var j:Number = 0;j<=lineLength/spacing;j++){
                    var _xSpacing:Number = 5;
                    var _lineV:Line = new Line();
                    _lineV.stroke = new SolidColorStroke(0x000000);
                    var _labelV:spark.components.Label = new spark.components.Label();
                    _labelV.text = String(j * 10);
                    _labelV.x = (_trunkLine.xFrom - 20);
                    if(j%10==0){
                        _xSpacing = 15;
                    }else if(j%5==0){
                        _xSpacing = 10;
                    }
                    if(j%scale==0){
                        _labelV.y = j * spacing+1 + + _trunkLine.yFrom;
                        this.addElement(_labelV);
                    }
                    _lineV.xFrom = _trunkLine.xFrom - _xSpacing;
                    _lineV.yFrom = j * spacing + _trunkLine.yFrom;
                    _lineV.xTo = _trunkLine.xFrom
                    _lineV.yTo = j * spacing + _trunkLine.yFrom;
                    this.addElement(_lineV);
                }
            }

            }
        }
    }

使用:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:con="contr.*"
                    xmlns:logic="com.runqianapp.fastreport.view.logic.*"    backgroundAlpha="0.0"
                    width="100%" height="100%" fontFamily="宋体"  creationComplete="init()">
    <fx:Declarations>

    fx:Declarations>
    <mx:HBox width="100%" height="100%" paddingLeft="20" paddingTop="20" horizontalGap="0">
        <con:Ruler lineLength="500" spacing="10" scale="5" type="vertical"/>
    mx:HBox>

mx:Application>

效果：