684
Flex borderSkin繪自定義寬度邊框的實例
項目打印需要，要有邊框，而且要設置邊框的寬度。我們項目是用Twaver flex做的，經過查資料和嚐試，采用在Network的rootCanvas上繪製邊框。但Canvas的樣式有限，不能直接修改邊框寬度。經過一番嚐試，通過borderSkin樣式能達到我要的效果。由於在網上沒有找到類似的文章，所以自己記錄下，方便自己查閱，以及和大家分享討論下這個方法。
這是我自定義的BorderSkin樣式類CanvasBorderSkin.as，通過改寫updateDisplayList方法繪製自定義寬度的邊框。
package com.starit.util
{
import flash.display.Graphics;
import mx.skins.halo.HaloBorder;
public class CanvasBorderSkin extends HaloBorder
{
public function CanvasBorderSkin()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var g:Graphics = graphics;
g.clear();
var borderThickness:Number = ViewController.CANVAS_BORDER_SIZE;
//這個就是邊框的寬度，可以自己定義
var borderColor:uint = this.getStyle("borderColor");
g.beginFill(borderColor);
g.drawRect(0, 0, w, h);
g.drawRect(borderThickness, borderThickness,
w - 2 * borderThickness,
h - 2 * borderThickness);
g.endFill();
}
}
}再在相應的視圖裏設置下network的樣式： network.rootCanvas.setStyle("borderStyle", "solid");
network.rootCanvas.setStyle("borderColor", 0x000000);
network.rootCanvas.setStyle("borderSkin", CanvasBorderSkin);
就能達到我要的效果了。
最後更新：2017-04-02 06:51:59