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>