2012-03-29 15:05 Spark正题下调整Canvas的边框样式

2012-03-29 15:05 Spark主题下调整Canvas的边框样式
在Halo主题下，可用borderThickness、borderSides等样式来精确控制边框，但在Spark主题下，默认是不支持的，没办法，只好自己扩展

1、自定义类

package {
import mx.containers.Canvas;

[Style(name = "borderThickness")]
[Style(name = "borderSides")]
public class CCanvas extends Canvas {
  public function CCanvas() {
   super();
  }
}
}


2、自定义皮肤

package {
import flash.display.Graphics;

import mx.skins.halo.HaloBorder;


public class CHaloBorder extends HaloBorder {

  override protected function updateDisplayList(w:Number, h:Number):void {
   super.updateDisplayList(w, h);
   var g:Graphics = graphics;
   g.clear();
   var borderColor:uint = this.getStyle("borderColor");
   var borderThickness:int = this.getStyle('borderThickness');
   g.beginFill(borderColor);
   g.lineStyle(borderThickness, borderColor);
   var borderSides:String = this.getStyle('borderSides');

   if (borderSides.indexOf("left") != -1) {
    g.moveTo(0, 0);
    g.lineTo(0, h)
   }
   if (borderSides.indexOf("top") != -1) {
    g.moveTo(0, 0);
    g.lineTo(w, 0)
   }

   if (borderSides.indexOf("right") != -1) {
    g.moveTo(w, 0);
    g.lineTo(w, h)
   }

   if (borderSides.indexOf("bottom") != -1) {
    g.moveTo(0, h);
    g.lineTo(w, h)
   }
   g.endFill();
  }
}
}
3、测试类

<?xml version="1.0" encoding="utf-8"?>
<s: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" minWidth="955" minHeight="600" xmlns:local="*">
<s:layout>
  <s:BasicLayout/>
</s:layout>
<local:CCanvas x="50" y="50" id="canvas" width="300" height="300" borderThickness="1" borderSides="left top right bottom"
       borderColor="blue" borderSkin="CHaloBorder"/>
</s:Application>