Web Chart入门(5) 3. 实战draw2d 之图形填充色(纯色 or 渐变)

颜色渐变

draw2d 目前没有提供直接对Figure 设置渐变效果的API.

但是raphael 有提供, 这样的话基本上在draw2d实现渐变成为可能。

颜色渐变功能来源

raphael 提供的图形背景色渐变的设置:看例子

<!--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.

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索raphael
, from
, gradient
black
drawchart.js、drawpiechart、mpchart 折线图 渐变、highchart 渐变色、纯色渐变,以便于您获取更多的相关知识。

时间: 2024-11-01 17:08:58

Web Chart入门(5) 3. 实战draw2d 之图形填充色(纯色 or 渐变)的相关文章

Web Chart入门(5) 4

实战draw2d(Raphael)之取消Chrome中Label Text 全部选中 情况描述 这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形. 在Chrome里拖拽图形的时候,偶尔会把所有Rectangle包含的Label 全部以深蓝色底色. 需要在非Canvas的区域点击一下,深底色才消除. 以上的状况出现在IE和Chrome都会有,但几率倒不是很大.在Firefox 中没有这个问题. 问题考虑与重现 既然不是所有流量器都有这个问题,应该和浏览器有一

Web Chart入门(5) 2

实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题) 问题描述 在draw2d中使用Canvas 的setZoom function来扩大,缩小画布进而放大,缩小画布上的图形大小.(Zoom in/Zoom Out功能). 图形类型Circle, Rectangle的放大,缩小都还正常, 但是 在Chrome浏览器下Label 的缩小功能却存在着label 的文本缩小时反而会变大的状况. 具体的测试方式如下: 1. 没有给label 特别设定font size.

Web Chart入门(6) canvas Chart 导出图文件

介绍 使用SVG绘制的图形可以导出为svg 格式的文件,使用浏览器等可以查看. 是否可以导出为png, gif 格式的文件呢? 当然是可以. 只是在 web 直接创建和操作文件是不建议的,而且存在各浏览器兼容的问题, 比如IE使用ActiveX来创建新文件. 正确的做法,是在web server 端传送文件到web 端, 不过对于web chart 来说, 好像又多绕了一圈. 这里的介绍为了简单,没有引入web Server. 既然使用的是Canvas,则本文的内容是针对支持HTML5的浏览器而

Web Chart入门(3) 图形布局-Layout

前言 从上一篇:   [Web Chart系列之二] 各种实现js 图表的library汇总与比较 的介绍, 目前提供提供绘制矢量图的library 还是很多的. 如果只是需要绘制一些柱状图, 饼图, 散点图, 时序图这样一些简单图的话, 从所列出的library 中是可以找到很多选择的. 但是如果需要绘制的是结构图, 关联图这样一些数据量大,逻辑稍显复杂的图,页面布局就是需要面临的一个大问题了. d3.js   提供了比较高级的的页面布局, 树形图:爆炸图: 三维图. 以及有专门使用其开发实现

Web Chart入门(5) 5. 实战draw2d之figure tooltip实现

写在前面 申明一下,关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发. 截至目前(2013/05), draw2d的最新版本已经是version 2.6.1 了. 对于tooltip 的功能,在 version 2.3.0是没有提供,但是, 在version 2.6.1已经提供了实现tooltip的方式. 实现tooltip in version 2.6.1 在没有看到实现源代码之前,以为实现方式应该是在draw2d.js 给 shape 加上一个too

Web Chart入门(5) 1. 实战draw2d 之总体介绍

draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 在搜索引擎中用draw2d这个关键字搜索会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SWT开发的一套绘图的工具.也就是java 开发一个图形绘制的应用程序,可以用来绘制UML等. 另一个是Draw2D touch,使用JavaScript 和HTML Canvas 开发的可以在web 端使用的js 框架. 这里说的是第二种, web 端使用的.具体来说, draw2d是什么,直接来看官方的定义:

Web Chart入门(4) 图形布局-Layout 之js设计实现

前言 定位browser 的 chart,   VML,SVG, HTML5 Canvas使用的方式各不一样. 如果使用现有的js  library (各种实现js 图表的library汇总与比较) , 调用的API方式也肯定不同. 举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置. 混在特定技术或是特定library 里去layout , 很明显不是一个明智之举. 切分开来, layout 的功能对于任何的图形绘制都适用.就是本章所讨论的了. 实

Web Chart入门(7) 物理动画效果(如撕扯效果)

物理动画 这里物理动画说的是,图形的动画效果和实际生活中的物理效果类似,比如说重力影响的效果. 其实动画的实现就是把一个动作拆分成间隔连续的去完成, 视觉上就感觉是在动的了. 比如把一个图从左边移到右边, 设总距离100的话, 每隔 1/40秒 移到 1 的话,效果就会有了. 这个时间间隔和距离间隔设置多少为最佳,美学上是有一些定义的,这里就不探讨了. 一个拽动和撕扯窗布的例子 三个文件 tearCloth.html ;  tearCloth.css ; tearCloth.js tearClo

Web Chart入门(2) Web端图形绘制SVG,VML, HTML5 Canvas简单实例

VML 的用法和实例 引入命名空间之后,就可以直接使用标签的方式绘制图形. 如下例:绘制一条从 坐标(20,20) 到 坐标(200,200) 的直线. <HTML xmlns:v = "urn:schemas-microsoft-com:vml"> <HEAD><TITLE>VML Example</TITLE> <META http-equiv=Content-Type content="text/html; char