[Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
颜色渐变
draw2d 目前没有提供直接对Figure 设置渐变效果的API.
但是raphael 有提供, 这样的话基本上在draw2d实现渐变成为可能。
颜色渐变功能来源
<!--Add by oscar999-->
</HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Linear Gradient</title><script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><script type="text/javascript" charset="utf-8">var paper = Raphael(10, 10, 800, 600);var circle = paper.circle(150, 150, 150);circle.attr({"fill": "90-#f00:5-#00f:95","fill-opacity": 0.5});</script>
</body>
</html>
先看一下 raphael 官方API对于fill 设置渐变色的说明:
Linear gradient format: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”, example: “90-#fff-#000
” – 90°gradient from white to black or “0-#fff-#f00:20-#000
” – 0° gradient from white via red (at 20%) to black.
radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”, example: “r#fff-#000
” –gradient from white to black or “r(0.25, 0.75)#fff-#000
” – gradient from white to black with focus pointat 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
这里简单说明一下 --
"fill": "90-#f00:5-#00f:95"
90 设置的是渐变的方向的角度, 90 就是垂直。
从#f00渐变到#00f, :5 和:95 是偏移量。
如果对以上的理解还不是很清晰的话,就要追溯到源头了。
看看在SVG中是如何处理渐变的。
在 SVG 中,有两种主要的渐变类型:
线性渐变
放射性渐变
这里以 线性渐变来说明了:
<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变:
当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变
当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变
当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变
看例子:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs><ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/></svg>
代码解释:
<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
这下应该豁然了....
draw2d的处理方式
在Figure 对应的Class(比如draw2d.shape.basic.Rectangle)的repaint 方法中添加:
attributes.fill = "90-#fff:5-#000:95";
渐变颜色根据需要配置,也可以动态配置
[Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)相关推荐
- [Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
写在前面 申明一下,关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发. 截至目前(2013/05), draw2d的最新版本已经是version 2.6.1 ...
- [Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
情况描述 这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形. 在Chrome里拖拽图形的时候,偶尔会把所有Rectangle包含的Label 全部以深蓝色底色. ...
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 用draw2d这个关键字,询问一下谷哥和度娘基本上会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SW ...
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
前言 ConnectionRouter 的作用是定义连线的展示样式. 是直线连接还是曲线连接(好像也是基于Bezier曲线) 位于包: draw2d.layout.connection 下. 常见的有 ...
- [Web Chart系列之五] 2. 实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题)
问题描述 在draw2d中使用Canvas 的setZoom function来扩大,缩小画布进而放大,缩小画布上的图形大小.(Zoom in/Zoom Out功能). 图形类型Circle, Rec ...
- [Web Chart系列之五] 图形布局-Circle Layout 之实现
前言 关于Circle Layout 的基本介绍, 可以参考: [Web Chart系列之三] 图形布局-Layout 布局的现实使用状况 这里使用这种布局来布局特定对象的关联. 这里的这些对象类似于 ...
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言 本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 的补充和实例说明各种技术的使用方式. VML 的用法和实例 引入命名空间之后,就可以 ...
- [Web Chart系列之三] 图形布局-Layout
前言 从上一篇: [Web Chart系列之二] 各种实现js 图表的library汇总与比较 的介绍, 目前提供提供绘制矢量图的library 还是很多的. 如果只是需要绘制一些柱状图, 饼图, ...
- go语言web开发系列之五:gin用zap+file-rotatelogs实现日志记录及按日期切分日志
一,安装需要用到的库: 1,安装zap日志库: liuhongdi@ku:/data/liuhongdi/zaplog$ go get -u go.uber.org/zap 2,安装go-file-r ...
最新文章
- mysql 是dos程序_mysql Dos操作
- 成为Web开发大师你必须知道的7件事情
- Rancher2.0中邮件通知的设置
- gVIM+zencoding快速开发HTML/CSS/JS(适用WEB前端)
- java从端口获取数据库_Java之通过接口获取数据并用JDBC存储到数据库中
- python设置文件编码_python批量修改文件编码格式的方法
- CSS精粹之布局技巧
- 微信翻译团队课余也搞围棋AI:比腾讯绝艺更强,首次亮相就夺冠
- 什么年代了,买硬盘不论T?
- 安装Matlab2016a中文破解版教程
- iwebAx产品家族之iweb SNS v0.6体验版--不错的开源软件~~
- 前端加密js库--CryptoJs
- 大学生计算机考试PPT制作,计算机等级考试制作PPT表格
- 嵌入式学习的几种线路图
- JSD-2204-Vue-ElementUI-Day06
- Arduino Uno 火焰传感器实验
- Ora2Pg配置文件详解
- 计算机系统中 使用二进制数的优势,大学计算机基础考试题库(含答案)
- 六大设计原则之接口隔离原则
- Qt4.8.6 ARM(DM3730)中文显示,文泉驿正黑
热门文章
- 防微博内容展示,使用Html.fromHtml(),解决内容不能换行的问题
- 服务器和客户端Socket单向通信例子
- IBM AppScan 安全漏洞问题修复(.net)
- po3580SuperMemo(splay)
- VC中将bmp作为资源文件写入EXE或DLL,然后内部调用(转)
- C#调用Dephi接口方法
- 12.解决SUSE Linux无法使用SSH登录的问题
- jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
- java.lang.NoClassDefFoundError异常处理
- C# 异常类型及对应异常类