在Halo主题下,可用borderThickness、borderSides等样式来精确控制边框,但在Spark主题下,默认是不支持的,没办法,只好自己扩展
1、自定义类
package {
import mx.containers.Canvas;
[Style(name = "borderThickness")]
[Style(name = "borderSides")]
public class CCanvas extends Canvas {
public function CCanvas() {
super();
}
}
}
2、自定义皮肤
package {
import flash.display.Graphics;
import mx.skins.halo.HaloBorder;
public class CHaloBorder extends HaloBorder {
override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);
var g:Graphics = graphics;
g.clear();
var borderColor:uint = this.getStyle("borderColor");
var borderThickness:int = this.getStyle('borderThickness');
g.beginFill(borderColor);
g.lineStyle(borderThickness, borderColor);
var borderSides:String = this.getStyle('borderSides');
if (borderSides.indexOf("left") != -1) {
g.moveTo(0, 0);
g.lineTo(0, h)
}
if (borderSides.indexOf("top") != -1) {
g.moveTo(0, 0);
g.lineTo(w, 0)
}
if (borderSides.indexOf("right") != -1) {
g.moveTo(w, 0);
g.lineTo(w, h)
}
if (borderSides.indexOf("bottom") != -1) {
g.moveTo(0, h);
g.lineTo(w, h)
}
g.endFill();
}
}
}
3、测试类
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<local:CCanvas x="50" y="50" id="canvas" width="300" height="300" borderThickness="1" borderSides="left top right bottom"
borderColor="blue" borderSkin="CHaloBorder"/>
</s:Application>
分享到:
相关推荐
2012-05-27 11:03 5,876,128 Android中文API.pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程(1).pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程.pdf 2012-05-27 11:02 22,486,569 C++语言的...
2012-05-27 11:03 5,876,128 Android中文API.pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程(1).pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程.pdf 2012-05-27 11:02 22,486,569 C++语言的...
2012-05-27 11:03 5,876,128 Android中文API.pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程(1).pdf 2012-05-27 11:03 1,349,809 Business Objects入门教程.pdf 2012-05-27 11:02 22,486,569 C++语言的...
Curved UI - VR Ready Solution To Bend:Warp Your Canvas.unitypackage,Unity Asset Store $25.全面展示了VR界面设计的应用,是全面UI设计比较好的学习资料。
2015-03-05 11:41 2015-03-13 20:02 2015-06-05 15:37 2015-07-21 18:13 2015-07-30 19:33 2015-09-16 18:16 2016-08-29 14:43 2017-08-03 09:18 2018-04-27 16:08 2018-04-27 16:10 2018-04-27 22:56 2018-04-28 21...
Off-Canvas-Bootstrap-Navigation如何使用: 从您的 html 添加或复制 style.css 内容或链接到文件。 --> < link rel =" stylesheet " type =" text/css " href =" path/to/file/layout.css " > 您还需要...
CanvasAPI-Google-Sheets-Add-on- Google表格调用Canvas LMS API的附加组件 该项目基于James Jones的Google表格脚本,该脚本为其他脚本提供了Canvas API功能。 它目前正在开发中,不打算用于生产用途。 纯娱乐! ...
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ,您可以从中将它们复制到Web服务器提供的文件夹中。 接下来,在HTML标记中包含缩小JavaScript Canvas to Blob脚本: < ...
前言好久不见,我是Channing因为最近事情比较多,很抱歉已经两个月没有写新文章了这几天终于有机会也因为工作上的一些灵感于是肝下这篇文章分享给大家希望能对你有一定的启发或帮助:folded_hands:拥有了强大的Canvas,...
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
copy-img-from-clipboard-to-canvas:从剪贴板复制图像并粘贴到画布
browser-search-algo-viz:玩浏览器canvas API
Fun-with-HTML-Canvas:Javascript30-8
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
46.CSS3中边框相关的样式29:22 47.CSS3中的变形功能25:48 48.CSS3中的动画功能36:41 49.布局相关的样式-多栏布局14:41 50.布局相关的样式-盒布局12:16 51.布局相关的样式-弹性盒布局30:26 52.Media Queries 与自适应...
画布文本编辑器教程 为什么要写另一个编辑器?... 我不打算具有以下任何功能来使任务更切合实际,因为这些主题中的每一个都有足够的问题来撰写有关以下内容的书: 支持RTL文本,象形文字和垂直文本; 搜索; 语法高
JavaScript-canvas-animation-game:这是javaScript游戏
NodeJS-Canvas LTI入门工具包 NodeJs来源 画布来源:用于以Canvas方式创建html页面 自定义参数示例 { "userid": "4", "courseid": "387", "sis_course_id": "umntc-olpd_2811_001-1179", "sis_section_ids": ...
Mr-Sprite-Canvas-Game:Mr Sprite帆布游戏练习
安装要在您的节点环境中安装此软件包,请运行: npm install optimizely-canvas-sdk用法注意:此示例请求已正确签名(尽管具有较弱的演示秘密),因此请随时尝试使用此软件包进行实际解析。 假设您在托管了Canvas...