文档章节

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
粉丝 3
博文 15
码字总数 275
作品 0
合肥
技术主管
私信 提问
ReactNative Flex 布局

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

Inlight先森
07/03
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
Flex 自定义组件外观

简介: Flex 是现今最受欢迎的 RIA 开发技术之一,它凭借其优秀的用户体验获得许多用户的青睐,因此也吸引了众多的程序员投入 Flex 学习的洪流之中。Flex 之所以如此受欢迎,一大部分原因是因...

红薯
2010/08/22
2.7K
2
还在用浮动吗?CSS flex布局你了解多少?

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

智能机器人蓝梓轩
06/30
0
0
从reactjs看flex的设计哲学

前两天收到了《react引领未来的用户界面开发框架》,因为一直在从事flex的开发,自然比较,自然发现其中80%的雷同之处。深度怀疑react的开发者是曾经的flex开发者一员,或者是仿冒,但是做到了...

fir01
2016/02/21
782
2

没有更多内容

加载失败,请刷新页面

加载更多

程序员该如何把握黄金五年!

在Java业界流行着一种说法——黄金5年,就是从程序员入职时算起,前五年的工作选择直接影响整个职业生涯的职业发展和薪资走向。如何把握这五年,从一个刚入行的菜鸟蜕变成一个处事不惊的大佬...

James-
7分钟前
0
0
使用正则表达式实现网页爬虫的思路详解

网页爬虫:就是一个程序用于在互联网中获取指定规则的数据。这篇文章主要介绍了使用正则表达式实现网页爬虫的思路详解,需要的朋友可以参考下 网页爬虫:就是一个程序用于在互联网中获取指定规...

前端小攻略
47分钟前
3
0
vue中锚点的三种方法

第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } } 组件: <template><div><ul class="li......

peakedness丶
48分钟前
2
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
今天
21
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部