BorderContainer的圆角问题
2024-05-14 13:11:12
如上所示(加载比较慢，请耐心等待……)，当设置圆角的时候位于角上的内容没有被截断，显示到边框之外了。
为了解决这个问题，写了一个皮肤，给内容部分加个带圆角的遮罩，即点击“切换”按钮之后的效果。
皮肤文件代码：
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx" alpha.disabled=".5" alpha="1">
5 <!-- host component -->
6 <fx:Metadata>
7 [HostComponent("spark.components.BorderContainer")]
8 </fx:Metadata>
9
10 <fx:Script>
11 <![CDATA[
12 import mx.graphics.BitmapFill;
13 import mx.graphics.SolidColor;
14 import mx.graphics.SolidColorStroke;
15
16 /**
17 * @private
18 */
19 override protected function measure():void
20 {
21 measuredWidth = contentGroup.measuredWidth;
22 measuredHeight = contentGroup.measuredHeight;
23 measuredMinWidth = contentGroup.measuredMinWidth;
24 measuredMinHeight = contentGroup.measuredMinHeight;
25
26 var borderWeight:Number = getStyle("borderWeight");
27
28 if (hostComponent && hostComponent.borderStroke)
29 borderWeight = hostComponent.borderStroke.weight;
30
31 if (borderWeight > 0)
32 {
33 var borderSize:int = borderWeight * 2;
34 measuredWidth += borderSize;
35 measuredHeight += borderSize;
36 measuredMinWidth += borderSize;
37 measuredMinHeight += borderSize;
38 }
39 }
40
41 /**
42 * @private
43 */
44 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
45 {
46 graphics.clear();
47
48 var borderWeight:int;
49 var borderStyle:String = getStyle("borderStyle");
50 var borderVisible:Boolean = getStyle("borderVisible");
51 var cornerRadius:Number = getStyle("cornerRadius");
52
53 if (hostComponent && hostComponent.borderStroke)
54 borderWeight = hostComponent.borderStroke.weight;
55 else
56 borderWeight = getStyle("borderWeight");
57
58 if (!borderVisible)
59 borderWeight = 0;
60
61 if (isNaN(borderWeight))
62 borderWeight = 1;
63
64 contentGroup.setStyle("left", borderWeight);
65 contentGroup.setStyle("right", borderWeight);
66 contentGroup.setStyle("top", borderWeight);
67 contentGroup.setStyle("bottom", borderWeight);
68
69 // update the bgRect stroke/fill
70 if (hostComponent.borderStroke)
71 {
72 bgRect.stroke = hostComponent.borderStroke;
73 }
74 else if (!borderVisible)
75 {
76 bgRect.stroke = null;
77 }
78 else
79 {
80 var borderColor:Number = getStyle("borderColor");
81 var borderAlpha:Number = getStyle("borderAlpha");
82
83 if (!isNaN(borderColor))
84 {
85 if (isNaN(borderAlpha))
86 borderAlpha = 1;
87 bgRect.stroke = new SolidColorStroke(borderColor, borderWeight, borderAlpha);
88 }
89 }
90
91 if (hostComponent.backgroundFill)
92 {
93 bgRect.fill = hostComponent.backgroundFill;
94 }
95 else
96 {
97 var bgImage:Object = getStyle("backgroundImage");
98
99 if (bgImage)
100 {
101 var bitmapFill:BitmapFill = bgRect.fill is BitmapFill ? BitmapFill(bgRect.fill) : new BitmapFill();
102
103 bitmapFill.source = bgImage;
104 bitmapFill.fillMode = getStyle("backgroundImageFillMode");
105 bitmapFill.alpha = getStyle("backgroundAlpha");
106
107 bgRect.fill = bitmapFill;
108 }
109 else
110 {
111 var bkgdColor:Number = getStyle("backgroundColor");
112 var bkgdAlpha:Number = getStyle("backgroundAlpha");
113
114 if (isNaN(bkgdAlpha))
115 bkgdAlpha = 1;
116
117 if (!isNaN(bkgdColor))
118 bgRect.fill = new SolidColor(bkgdColor, bkgdAlpha);
119 else
120 bgRect.fill = new SolidColor(0, 0);
121 }
122 }
123
124 // Draw the shadow for the inset style
125 if (borderStyle == "inset" && hostComponent.borderStroke == null && borderVisible)
126 {
127 var negCR:Number = -cornerRadius;
128 var path:String = "";
129
130 if (cornerRadius > 0 && borderWeight < 10)
131 {
132 // Draw each corner with two quadratics, using the following ratios:
133 var a:Number = cornerRadius * 0.292893218813453;
134 var s:Number = cornerRadius * 0.585786437626905;
135 var right:Number = unscaledWidth - borderWeight;
136
137 path += "M 0 " + cornerRadius; // M 0 CR
138 path += " Q 0 " + s + " " + a + " " + a; // Q 0 s a a
139 path += " Q " + s + " 0 " + cornerRadius + " 0"; // Q s 0 CR 0
140 path += " L " + (right - cornerRadius) + " 0"; // L (right-CR) 0
141 path += " Q " + (right - s) + " 0 " + (right - a) + " " + a; // Q (right-s) 0 (right-a) a
142 path += " Q " + right + " " + s + " " + right + " " + cornerRadius; // Q right s right CR
143 insetPath.height = cornerRadius;
144 }
145 else
146 {
147 path += "M 0 0";
148 path += " L " + (unscaledWidth - borderWeight) + " 0";
149 insetPath.height = 1;
150 }
151
152 insetPath.x = borderWeight;
153 insetPath.y = borderWeight;
154 insetPath.width = unscaledWidth - (borderWeight * 2);
155 insetPath.data = path;
156 insetPath.stroke = new SolidColorStroke(0x000000, 1, .12);
157 }
158 else
159 {
160 insetPath.data = "";
161 insetPath.stroke = null;
162 }
163
164 bgRect.radiusX = bgRect.radiusY = cornerRadius;
165
166 // mask
167 var shape:Shape = new Shape();
168 var g:Graphics = shape.graphics;
169
170 g.clear();
171 g.beginFill(1);
172 g.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, cornerRadius, cornerRadius);
173 g.endFill();
174
175 contentGroup.mask = shape;
176
177 super.updateDisplayList(unscaledWidth, unscaledHeight);
178
179 if (getStyle("dropShadowVisible") == true)
180 {
181 rds.alpha = 0.4;
182 rds.angle = 90;
183 rds.color = 0x000000;
184 rds.distance = 5;
185 rds.tlRadius = rds.trRadius = rds.blRadius = rds.brRadius = cornerRadius + 1;
186
187 graphics.lineStyle();
188 rds.width = unscaledWidth;
189 rds.height = unscaledHeight;
190 }
191 }
192 ]]>
193 </fx:Script>
194
195 <!-- states -->
196 <s:states>
197 <s:State name="normal" />
198 <s:State name="disabled"/>
199 </s:states>
200
201 <s:Rect id="bgRect" left="0" right="0" top="0" bottom="0">
202 </s:Rect>
203
204 <!-- SkinParts
205 name=contentGroup, type=spark.components.Group, required=false
206 -->
207 <s:Group id="contentGroup"/>
208
209 <s:Path id="insetPath"/>
210
211 <s:RectangularDropShadow id="rds"/>
212 </s:Skin>具体就不解释了，大部分都是拷贝自BorderContainer的默认皮肤文件：spark.skins.spark.BorderContainerSkin，只有注释了mask部分为加的遮罩.
转载于:https://www.cnblogs.com/lipbb/archive/2012/05/14/2499014.html
BorderContainer的圆角问题相关推荐
- Html_div圆角
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- swing 圆角按钮_JFrame实现圆角窗体
现在开发一个窗体程序,经常要求用圆角窗体.而在Windows 经典外观下,直接写出来的窗体却是方型的.在windows 7.windows server2008 的外观下,就已经是圆角的了. 这里我们 ...
- app图标圆角角度_?APP图标造型分析
规范布局强化设计空间 文/祝艳妮 单从视觉效果上看,图标都有一个标准尺寸的外形,借助图标的规范模版,我们方便控制图形大小.空间安排.结构比例.移动终端体积小,一般是近距离观看.适应这一使用特性,APP ...
- 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）...
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- [JS,CSS] - CSS圆角框组件
来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...
- CSS之布局（轮廓和圆角）
轮廓和圆角: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
- iOS开发之圆角指定
如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...
- 纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
最新文章
- ubuntu下命令安装与卸载软件方法
- 让人难以置信的HTML5和JavaScript实验
- mybatis 多租户saas_彻底理解微商城多租户Saas架构设计
- 常见数据库默认端口号
- SDOI2016R2（怎么可能是解题报告）
- python关闭csv文件_Python文件处理（txt、csv文件读取）
- 【读书笔记《Android游戏编程之从零开始》】11.游戏开发基础（SurfaceView 游戏框架、View 和 SurfaceView 的区别）
- matlab数字信号处理程序,MATLAB数字信号处理 85个案例分析 全书程序
- 怎么在线把QLV格式转成MP4
- 单应性矩阵的理解及求解1
- AI遮天传 DL-回归与分类
- zabbix监控软件介绍＜一＞
- python中drop用法_Python drop方法删除列之inplace参数实例
- 博客SQL-Server更新数据库UPDATE语法读书笔记[图]
- C语言程序设计教程（第三版）课后习题11.1
- 助推国产基础软硬件建设，巨杉数据库与湘江鲲鹏完成产品兼容认证
- 百胜软件 武汉php,熹茗茶业百胜软件达成合作，共促茶业信息化发展进程
- 1. IOT平台升级指南
- 什么是压电雨量监测站？由什么组成
- 新版百度网盘MD5 获取计算提取加密映射 方式