文档章节

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

wenin819
 wenin819
发布于 2015/11/24 16:47
字数 275
阅读 5
收藏 0
点赞 0
评论 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
合肥
技术主管
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear ⋅ 05/29 ⋅ 0

flex和box如何使用,flexbox又是什么

display:box; 是老语法,display:flex;是新语法。flexbox是只有ie10才有的特殊语法,ie11可以用flex。 box支持的浏览器更多,flex旧版本浏览器不支持。 flex能让我们轻易的实现 宽度均分、垂...

linsk1998 ⋅ 05/16 ⋅ 0

css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏 ⋅ 05/03 ⋅ 0

Flexible Box 布局与小程序开发

Flexible Box 布局与小程序开发 参考资料: 1.A Complete Guide to Flexbox BY CHRIS COYIER 2.Flex 布局教程:语法篇 3.Flex 布局教程:实例篇 4.A Visual Guide to CSS3 Flexbox Propertie......

坚果jimbowhy ⋅ 05/27 ⋅ 0

flex布局方法详解之flex-direction

首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 本文结合微信小程序 来对flex布局做一个说明,用到了view组件,其实你只需要把...

剽悍一小兔 ⋅ 06/19 ⋅ 0

整合Springboot+Blazdes+Spring+Flex

写在前面: Flex是10年前的产物,基本也要退出历史舞台了,手里有个Flex 项目,最近又在看SpringBoot方面的书,突发奇想,能不能整合一下。由于Flex年代久远,国内相关文献实在是少的可怜。努力...

章大大 ⋅ 06/15 ⋅ 0

前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd ⋅ 05/11 ⋅ 0

CSS3 display:flex和display:box的区别

display:box; 是老语法,display:flex;是新语法,二者还有以下不同:与子元素 display 方式的相关性不同display:box; 作用下,如果子元素是 block 的,竖着排,如果子元素是 inline、inline-...

莫西摩西 ⋅ 04/26 ⋅ 0

React Native -- Flexbox

1、alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 源码描述 // How to align children in the cross direction// https://developer.mozilla.org/en-US/docs/Web/CSS/ali......

jwzhangjie ⋅ 2015/09/28 ⋅ 0

flex布局方法详解之flex-wrap

首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 本文结合微信小程序 来对flex布局做一个说明,用到了view组件,其实你只需要把...

剽悍一小兔 ⋅ 06/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA入门,配置文件的设置

<?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http......

码农屌丝 ⋅ 23分钟前 ⋅ 0

Java基础——面向对象和构造器

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 静态成员介绍 为什么要有静态成员?静态成员用来...

凯哥学堂 ⋅ 25分钟前 ⋅ 0

vmware中Centos 7 linux的LVM磁盘扩容

系统是RHEL7(centos7差不多一样) 关闭系统,在vmware、设置、硬盘、扩展、输入数字大于当前系统内存、点击扩展。 开机再查看磁盘信息 fdisk -l 注意:可以看出sda磁盘增加了,但是根目录还...

gugudu ⋅ 35分钟前 ⋅ 0

JAVA线程sleep和wait方法区别

昨天面试,突然被问到sleep 和 wait的区别,一下子有点蒙,在这里记一下,以示警戒。 首先说sleep,sleep就是正在执行的线程主动让出cpu,cpu去执行其他线程,在sleep指定的时间过去后,cpu...

徐玉强 ⋅ 37分钟前 ⋅ 0

vuex学习--模块

随着项目复杂性增加,共享状态也越来越多。需要对转态操作进行分组,分组后在进行分组编写。学习一下module:状态管理器的模块组操作。 首先是声明: const moduleA={ state,mutations,g...

大美琴 ⋅ 39分钟前 ⋅ 0

Selenium 简单入门

安装 pip install selenium 驱动下载 https://chromedriver.storage.googleapis.com/index.html 下载最新的驱动,放入path中,可以放入Python的scripts目录下,也可以放入Chrome安装目录,并...

阿豪boy ⋅ 41分钟前 ⋅ 0

292. Nim Game - LeetCode

Question 292. Nim Game Solution 思路:试着列举一下,就能发现一个n只要不是4的倍数,就能赢。 n 是否能赢1 true2 true3 true4 false 不论删除几,对方都能一把赢5 t...

yysue ⋅ 今天 ⋅ 0

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

zip压缩工具 zip命令可以压缩目录和文件,-r 压缩目录。 zip使用方法 zip 1.txt.zip 1.txt //压缩文件 zip -r 123.zip 123/ //压缩目录 unzip 1.txt.zip //解压 unzip 123.zip -d /root/456...

Linux_老吴 ⋅ 今天 ⋅ 0

react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js import React from 'react'import Loadable fro......

pengqinmm ⋅ 今天 ⋅ 0

记录工作中遇到的坑

1、ios safari浏览器向下滚动会触发window resize事件

端木遗风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部