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