导读:
FLEX对界面设计的支持是非常优秀的,如果你想修改一个UI的样式可以用很多方法,但是如果你还不满足,还想做出更多更复杂的表现呢?比如一个Canvas的边框是双线形式的,或者三线,或者其他效果,双线效果如下图.
那该怎么来实现呢?这样我们就需要拓展一些样式类,比如线条是extends RectangularBorder
//在主程序的<style>里加入,自定义线条样式 <br> Canvas{ <br> borderSkin: ClassReference('com.uyang.canvasNewSkin'); <br> } <br> //主程序 <br> <canvas width="300" height="300" backgroundcolor="#e1e1e1" horizontalcenter="-11" verticalcenter="22.5"></canvas><br> 然后我在com文件夹下的uyang文件夹下,新建立canvasNewSkin类,代码如下: <br> package com.uyang{ <br> import mx.skins.RectangularBorder; <br> import flash.display.Graphics; <br> public class canvasNewSkin extends RectangularBorder{ <br> public function canvasNewSkin() {} <br> private var _backgroundColor:uint; <br> private var g:Graphics = graphics; <br> private var g1:Graphics = graphics; <br> <br> override protected function updateDisplayList <br> (unscaledWidth:Number, unscaledHeight:Number):void { <br> super.updateDisplayList(unscaledWidth, unscaledHeight); <br> _backgroundColor = getStyle("backgroundColor"); <br> <br> g.beginFill(_backgroundColor,1.0); <br> g.lineStyle(0,0x000000,1); <br> g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br> g.endFill(); <br> <br> g1.lineStyle(0,0xff0000,1); <br> g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br> g1.endFill(); <br> //如果需要三线,那就再加一个g2的graphics等 <br> } <br> } <br> } <br> 这样就完成了一个双线边框样式的制作,当然随便哪个组件他们所需要拓展的边框类是一样的,别忘了,那个边框还可以画出其他更多的可能性哦,比如半圆,或者可以加点其他效果,投影,模糊等.如加个模糊效果: <br> package com.uyang{ <br> import mx.skins.RectangularBorder; <br> import flash.display.Graphics; <br> import flash.filters.DropShadowFilter; <br> import flash.filters.BlurFilter; <br> public class canvasNewSkin extends RectangularBorder{ <br> public function canvasNewSkin() {} <br> private var _backgroundColor:uint; <br> private var g:Graphics = graphics; <br> private var g1:Graphics = graphics; <br> private var dropShadow:DropShadowFilter = new DropShadowFilter(); <br> private var blueF:BlurFilter = new BlurFilter(); <br> <br> override protected function updateDisplayList <br> (unscaledWidth:Number, unscaledHeight:Number):void { <br> super.updateDisplayList(unscaledWidth, unscaledHeight); <br> _backgroundColor = getStyle("backgroundColor"); <br> <br> g.beginFill(_backgroundColor,1.0); <br> g.lineStyle(0,0x000000,1); <br> g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br> g.endFill(); <br> <br> g1.lineStyle(0,0xff0000,1); <br> g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br> g1.endFill(); <br> //模糊效果 <br> blueF.blurX =5; <br> blueF.blurY =5; <br> filters = [blueF]; <br> //投影效果 <br> dropShadow.color = 0x000000; <br> dropShadow.blurX = 10; <br> dropShadow.blurY = 10; <br> dropShadow.angle = 90; <br> dropShadow.alpha = 0.5; <br> dropShadow.distance = 5; <br> filters = [dropShadow]; <br> } <br> } <br> } <br> PS:文章为一次性写完,实在不能保证没有遗漏,如有问题可以提问.如果此代码对你造成心里困扰,或者其他负面问题,本人概不负责.:) <br> <br> Tags: flex, skin, 界面设计, classreference <br><br>本文转自 <br><a href="http://www.uncool.cn/blogs/read.php?149">http://www.uncool.cn/blogs/read.php?149</a></body></html></style>
FLEX对界面设计的支持是非常优秀的,如果你想修改一个UI的样式可以用很多方法,但是如果你还不满足,还想做出更多更复杂的表现呢?比如一个Canvas的边框是双线形式的,或者三线,或者其他效果,双线效果如下图.
![1196963244_0.jpg](http://www.uncool.cn/blogs/attachment/1196963244_0.jpg)
那该怎么来实现呢?这样我们就需要拓展一些样式类,比如线条是extends RectangularBorder
//在主程序的<style>里加入,自定义线条样式 <br> Canvas{ <br> borderSkin: ClassReference('com.uyang.canvasNewSkin'); <br> } <br> //主程序 <br> <canvas width="300" height="300" backgroundcolor="#e1e1e1" horizontalcenter="-11" verticalcenter="22.5"></canvas><br> 然后我在com文件夹下的uyang文件夹下,新建立canvasNewSkin类,代码如下: <br> package com.uyang{ <br> import mx.skins.RectangularBorder; <br> import flash.display.Graphics; <br> public class canvasNewSkin extends RectangularBorder{ <br> public function canvasNewSkin() {} <br> private var _backgroundColor:uint; <br> private var g:Graphics = graphics; <br> private var g1:Graphics = graphics; <br> <br> override protected function updateDisplayList <br> (unscaledWidth:Number, unscaledHeight:Number):void { <br> super.updateDisplayList(unscaledWidth, unscaledHeight); <br> _backgroundColor = getStyle("backgroundColor"); <br> <br> g.beginFill(_backgroundColor,1.0); <br> g.lineStyle(0,0x000000,1); <br> g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br> g.endFill(); <br> <br> g1.lineStyle(0,0xff0000,1); <br> g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br> g1.endFill(); <br> //如果需要三线,那就再加一个g2的graphics等 <br> } <br> } <br> } <br> 这样就完成了一个双线边框样式的制作,当然随便哪个组件他们所需要拓展的边框类是一样的,别忘了,那个边框还可以画出其他更多的可能性哦,比如半圆,或者可以加点其他效果,投影,模糊等.如加个模糊效果: <br> package com.uyang{ <br> import mx.skins.RectangularBorder; <br> import flash.display.Graphics; <br> import flash.filters.DropShadowFilter; <br> import flash.filters.BlurFilter; <br> public class canvasNewSkin extends RectangularBorder{ <br> public function canvasNewSkin() {} <br> private var _backgroundColor:uint; <br> private var g:Graphics = graphics; <br> private var g1:Graphics = graphics; <br> private var dropShadow:DropShadowFilter = new DropShadowFilter(); <br> private var blueF:BlurFilter = new BlurFilter(); <br> <br> override protected function updateDisplayList <br> (unscaledWidth:Number, unscaledHeight:Number):void { <br> super.updateDisplayList(unscaledWidth, unscaledHeight); <br> _backgroundColor = getStyle("backgroundColor"); <br> <br> g.beginFill(_backgroundColor,1.0); <br> g.lineStyle(0,0x000000,1); <br> g.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,5,5,5,5); <br> g.endFill(); <br> <br> g1.lineStyle(0,0xff0000,1); <br> g1.drawRoundRectComplex(2,2,unscaledWidth-4,unscaledHeight-4,5,5,5,5); <br> g1.endFill(); <br> //模糊效果 <br> blueF.blurX =5; <br> blueF.blurY =5; <br> filters = [blueF]; <br> //投影效果 <br> dropShadow.color = 0x000000; <br> dropShadow.blurX = 10; <br> dropShadow.blurY = 10; <br> dropShadow.angle = 90; <br> dropShadow.alpha = 0.5; <br> dropShadow.distance = 5; <br> filters = [dropShadow]; <br> } <br> } <br> } <br> PS:文章为一次性写完,实在不能保证没有遗漏,如有问题可以提问.如果此代码对你造成心里困扰,或者其他负面问题,本人概不负责.:) <br> <br> Tags: flex, skin, 界面设计, classreference <br><br>本文转自 <br><a href="http://www.uncool.cn/blogs/read.php?149">http://www.uncool.cn/blogs/read.php?149</a></body></html></style>