文档章节

Flex borderSkin绘自定义宽度边框的实例

wenin819
 wenin819
发布于 2015/11/24 16:47
字数 275
阅读 5
收藏 0

项目打印需要,要有边框,而且要设置边框的宽度。我们项目是用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);

就能达到我要的效果了。

© 著作权归作者所有

共有 人打赏支持
wenin819
粉丝 2
博文 15
码字总数 275
作品 0
合肥
技术主管
ReactNative Flex 布局

起源 2009年,W3C 提出了一种新的方案----Flex 布局,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。目前,它已经得到了所有浏览器的支持,这意味着,现在...

Inlight先森
07/03
0
0
关于 Flex 中的 flex-grow、flex-shrink、flex-basis

在使用 flex 布局的时候难以理解的是 flex-grow、flex-shrink、flex-basis 几个属性的用法,下面通过几个例子来演示。 flex-basis flex-basis 用于设置子项的占用空间。如果设置了值,则子项...

evenyao
07/16
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
08/08
0
0
还在用浮动吗?CSS flex布局你了解多少?

传统的布局:围绕盒子模型(border、margin、padding) 定位(position)、浮动(float)等。 flex布局又叫弹性布局 , 主要内容包括两大部分有: 容器(父元素)的六个属性和项目(子元素)...

智能机器人蓝梓轩
06/30
0
0
flex flex-grow flex-shrink  自动适应大小 计算

使用这两个属性时,父组件高度必须设置为确定值,否则高度会变成0!!! flex-grow 的计算方式 flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。其值为一...

阿豪boy
03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[Python进阶] Python命令行参数

Python 获得命令行参数的方法 需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2] 解析命令行参数 Python提供了一个getopt模块,可用于解...

Eappo_Geng
20分钟前
1
0
add docker api url to jenkins

add docker api url to jenkins add jenkins to dockergroup gpasswd -a $USER docker gpasswd -a jenkins docker DOCKER_OPTS="-H tcp://0.0.0.0:4243 -H unix:///var/run/docker.sock" in ......

kewei_zhang
24分钟前
1
0
Scala入门篇

1、定义变量 var 可变 val 不可变,相当于Java中的final Unit相当于Java中的void,以()表示 scala> val a = println("ddd") ddd a: Unit = () 2,声明数组 scala> val arr = Array(1,2,3,4,5) ......

算法之名
25分钟前
7
0
利用redis统计分布式集群中接口缓存命中情况

接口使用了缓存,想看看缓存命中率,到底提升了多少了?固想到做个统计方法,单机情况下使用 AtomicImteger,考虑到分布式集群中多台服务器调用,所以考虑使用redis进行统计 原来的想法很简单用分布...

计算机的小二青年
25分钟前
1
0
前端加密JS库--CryptoJS 使用指南

有时候项目涉及到的敏感数据比较多,为了信息安全,我们常常需要对一些数据进行接口加密处理,如编码、将明文转化为暗文、加密比对、AES + BASE64 算法加密等。 Base64 编码 为什么要编...

舒龙虎
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部