当前位置:首页 > 开发 > Web前端 > 前端 > 正文

flex中的虚线框(dotted or dashed border for flex)

发表于: 2012-10-12   作者:darrenzhu   来源:转载   浏览次数:
摘要: DashBorder class package { import mx.core.UIComponent; public class DashBorder extends UIComponent{ private var dashlen:Number = 5; private var gaplen:Number = 5;
DashBorder class
package
{
  import mx.core.UIComponent;
  
  public class DashBorder extends UIComponent{
    private var dashlen:Number = 5;
    private var gaplen:Number = 5;
    
    public function DashBorder(){
      super();
    }

    override protected function updateDisplayList
      (unscaledWidth:Number, unscaledHeight:Number):void{

      super.updateDisplayList(unscaledWidth, unscaledHeight);

      var borderThickness:int = getStyle("borderThickness");
      var borderColor:int = getStyle("borderColor");
      var backgroundColor:int = getStyle("backgroundColor");
      var backgroundAlpha:Number = getStyle("backgroundAlpha");

      graphics.clear();

      graphics.beginFill(backgroundColor, backgroundAlpha);
      graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

      graphics.lineStyle(borderThickness, borderColor, 1)

      if (getStyle("dashlen")) {
           this.dashlen = getStyle("dashlen");
      }
      if (getStyle("gaplen")) {
           this.gaplen = getStyle("gaplen");
      }

      drawBorder(this.x, this.y, unscaledWidth, unscaledHeight,
        this.dashlen, this.gaplen); 
    }

    public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number,
      dashlen:Number, gaplen:Number): void {     
      if((x1 != x2) || (y1 != y2)){
        var incrlen:Number = dashlen + gaplen;
      
        var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
        var angle:Number = Math.atan((y2 - y1) / (x2 - x1));
        var steps:uint = len / (dashlen + gaplen);
      
        var dashstepx:Number = dashlen * Math.cos(angle);
        if (x2 < x1) dashstepx *= -1;
      
        var dashstepy:Number = dashlen * Math.sin(angle);
      
        var gapstepx:Number = gaplen * Math.cos(angle);
        if (x2 < x1) gapstepx *= -1;
      
        var gapstepy:Number = gaplen * Math.sin(angle);
        var stepcount:uint = 0;
      
        while ((stepcount++) < steps) {        

          var dashstartx:Number;
          var dashstarty:Number;
          var dashendx:Number;
          var dashendy:Number;
        
          if(x1 == x2 && y1 != y2){
            dashstartx = dashendx = x1;
            if(y2 > y1){
              dashstarty = y1 + ((stepcount-1) * (dashlen + gaplen));              
              dashendy = dashstarty + dashlen;
            }else{
              dashstarty = y1 - ((stepcount-1) * (dashlen + gaplen));              
              dashendy = dashstarty - dashlen;
            }
          }else if(y1 == y2 && x1 != x2){
            dashstarty = dashendy = y1;
            if(x2 > x1){
              dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx + dashlen;
            }else{
              dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx - dashlen;
            }
          }
          graphics.moveTo(dashstartx, dashstarty);
          graphics.lineTo(dashendx, dashendy);
        }
      }
    }
    
    private function drawBorder(x1:Number, y1:Number, width:Number, height:Number,
      dashlen:Number, gaplen:Number) : void {
		var borderSides:String = getStyle("borderSides");			
		if (borderSides != "left top right bottom")
		{
			// Adjust metrics based on which sides we have				
			if (borderSides.indexOf("left") != -1){
				drawLine(x1, y1 + height, x1, y1, dashlen, gaplen);
			}
			if (borderSides.indexOf("top") != -1){
				drawLine(x1, y1, x1 + width, y1, dashlen, gaplen);
			}
			if (borderSides.indexOf("right") != -1){
				drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, gaplen);
			}
			if (borderSides.indexOf("bottom") != -1){
				drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen);
			}
		}     
    }    
  }
}



Usage example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  verticalGap="20" backgroundGradientColors="0xFFFFFF, 0xFFFFFF"
  backgroundColor="0xFFFFFF" viewSourceURL="srcview/index.html">
  <mx:Script>
    <![CDATA[
      [Bindable] private var numValid:uint = 0;
      
      private function applyStyles():void{
        nv.validate(dash.text);
        nv.validate(gap.text);
        nv.validate(thickness.text);
        if(numValid == 3){
          var myBorderStyle:CSSStyleDeclaration = 
            new CSSStyleDeclaration('myBorderStyle');
          myBorderStyle.setStyle('dashlen', Number(dash.text));          
          myBorderStyle.setStyle('gaplen', Number(gap.text));          
          myBorderStyle.setStyle('borderThickness', Number(thickness.text));
          StyleManager.setStyleDeclaration("DashBorder", myBorderStyle, true);
        }
        numValid = 0;          
      }
    ]]>
  </mx:Script>
  <mx:NumberValidator id="nv" allowNegative="false" domain="real" valid="numValid++;" 
    invalid="mx.controls.Alert.show('ERROR: dash length, gap length, and border thickness must be (positive) numbers.');"/> 
  <mx:Form label="Choose Dashed Border Properties">
    <mx:FormItem label="Dash Length">
      <mx:TextInput id="dash" width="100" text="5"/>
    </mx:FormItem>
    <mx:FormItem label="Gap Length">
      <mx:TextInput id="gap" width="100" text="5"/>
    </mx:FormItem>
    <mx:FormItem label="Border Thickness">
      <mx:TextInput id="thickness" width="100" text="1"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button id="apply" label="Apply Styles"
        click="applyStyles()"/>
    </mx:FormItem>
  </mx:Form>
  <mx:VBox id="vb" borderSkin="DashBorder" width="250" height="20" 
    borderColor="0xFF0000"
    backgroundColor="0xFFFFFF" borderSides="bottom"
    horizontalAlign="center" verticalAlign="middle">
  </mx:VBox>
	
	<mx:VBox borderStyle="solid" borderSides="bottom" width="250" height="20"/>
</mx:Application>

flex中的虚线框(dotted or dashed border for flex)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1 flex
Flex使用事件冒泡机制 第一:新建Flex项目 第二:新建mxml application 代码如下<span style="fo
在开发 Flex 或 AIR 应用程序的时候,如果需要把图片、声音等资源嵌入到目标文件中的时候,一般需要
一、 准备工作: 所需要的软件 Eclipse 3.3 + FlexBuilder3 beta2 插件版 +MyEclipse 6.0 +Lcds + T
这里是第一篇,将讲述一下Flex中如何应用UI的皮肤,其实应用UI皮肤不难,你们在使用Flex的过程中是
关于MVP是MVC的另一种模式,在MVP模式中视图和模型是完全分离的,他们通过Presenter进行交互。 Pres
1、设计思路 (1)运用导航条,实现多个图在同一界面; (2)实现各种不同的图 2、设计源码 chart.m
Flex 最终会生成 swf 文件以 ActiveX 的方式部署网页上( html,jsp,asp,aspx 等),由于 ActiveX 是
Flex 最终会生成 swf 文件以 ActiveX 的方式部署网页上( html,jsp,asp,aspx 等),由于 ActiveX 是
Session是Jsp 9大内置对象之一,但是在Flex中却没有这一概念。曾经看过一本叫《Flex 企业应用开发实
Session是Jsp 9大内置对象之一,但是在Flex中却没有这一概念。曾经看过一本叫《Flex 企业应用开发实
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号