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

draw2d 是什么?

首先需要明确的是这里指的draw2d是个什么东东?

在搜索引擎中用draw2d这个关键字搜索会找到两个东西

一个是集成在eclipse(也可以单独使用) 里面使用SWT开发的一套绘图的工具。也就是java 开发一个图形绘制的应用程序,可以用来绘制UML等。

另一个是Draw2D touch,使用JavaScript 和HTML Canvas 开发的可以在web 端使用的js 框架。

这里说的是第二种, web 端使用的。具体来说, draw2d是什么,直接来看官方的定义:

Draw2D touch是一个纯的javascript的应用程序框架,它兼容从IE6到最新版Chrome几乎所有目前流行的浏览器。

你可以使用它在浏览器端创建跨平台的图形应用程序。

以上是官方的定义,从技术角度来看简单的概括一下:

使用JQuery 和Raphael 实现的web 端图形绘制的Javascript 框架。 图形最底层技术还是VML,SVG,HTML Canvas。

如何获取draw2d?

官方的地址: http://www.draw2d.org

使用例子和API查找可以到 :   http://draw2d.org/draw2d_touch/jsdoc/#!/example

比较遗憾的是这是一个收费的项目,官方网址上并没有提供下载的地址。

购买价格是499欧元,下载试用版的话需要 4欧元。

draw2d的优劣势是什么?

这里的优劣是只是与同类的framework 比较而言,像浏览器兼容这种都有的特性就不做多的讨论了。

优势(也就是有的特性):

1.  提供所有基本的图形。

矩形,菱形,三角形,圆,椭圆,直线,曲线,箭头线,等

2.  对图形的操作很容易

提供了对图形的单击,双击,选中,拖拽的功能

提供了对两个图形的连线功能

3 提供基本的图形

饼图,走势图(SparkLine)

4. 提供了对图形操作动作的恢复,撤销功能。

优势(也就是没有的特性):

1. 图形的右键单击菜单

2. 对图形在页面上的布局。(其本身提供的Layout 针对的一个复杂图形的组合layout)

时间: 2024-10-28 09:15:52

Web Chart入门(5) 1. 实战draw2d 之总体介绍的相关文章

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) 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/st

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