路径（Path）是由按照一定顺序的多个绘图命令定义的。Raphael 中使用 Paper.path() 方法绘制路径。Paper.path() 方法接受一个路径字符串或者一个数组作为参数( 数组通常更方便，更具可读性定）。 例如： var xStart = 100; var yStart = 180; var path = paper.p... [阅读全文]

使用自定义字体需要使用名为 cufon 的第三方JS库，使用 cufon 的工具将字体生成一个字体的JS文件。cufon 项目自带了一个 Vegur.font.js 文件。JS文件到项目中： <script type="text/javascript" src="raphael.min.js&... [阅读全文]

Raphaël 中使用文本方法（text()）创建文本。在画布中绘制文本，而不是使用 CSS样式的 HTML 标记，允许我们使用以与其他形状相同的方式对文字进行动画和转换操作。 其语法如下： Paper.text(x, y, text) 参数说明 x – x 坐标； y – y 坐标； text – 文... [阅读全文]

有时我们希望应用相同的属性，转换或动画到多个元素。 我们可以在 Raphaël 中用元素进行分组设置方法 Paper.set()。 例如以下形状： var paper = Raphael('group', 540, 200); var circle = paper.circle(100, 100, 80); var r... [阅读全文]

Raphaël支持对元素应用线性和径向渐变效果。 为了达成这个效果，不是在 fill 属性上指定一个颜色字符串，而是指定一组颜色字符串的形式。下面的代码是用来创建线性渐变： // 角度-色值[-色值[:偏移]]-色值 <angle>-<color>[-<color>[:<off... [阅读全文]

我们绘制的形状可以有 fill，strokes 和其他一些形状应用于它们的属性。 当我们创建一个形状时，一个 Element 对象被返回。这个对象有一个attr方法，它接受许多键 – 值对的属性。 在这一节我们将看看可以应用到我们的图纸的各种属性使用这种方法。 fill 属性 – 填充内容 fill 属性，填充内容... [阅读全文]

Raphaël 允许我们将位图（.jpg或.png）图像嵌入到画布中，可以使用 Paper.image() 方法。 语法 Paper.image(imagePath, x, y, width, height); 参数说明 imagePath – 图片的路径； x – 在画布中的 x （left）坐标； y R... [阅读全文]

Raphaël提供了绘制基本形状的矩形（Paper.rect()），圆形（Paper.circle()）和椭圆形（Paper.ellipse()）方法。这些是创建画布时返回的 Paper 对象的方法。 矩形 Paper.rect() 使用矩形方法 Paper.rect() 可以创建正方形和长方形。 语法 Paper.rect(x, y, ... [阅读全文]

由于工作需要，最近在使用 RaphaelJS 开发基于 Web 的图形绘制软件，这里是我整理的一些学习 RaphaelJS 的 API 笔记。 Raphael() 函数 使用 RaphaelJS 做开发的第一步就是使用 Raphael() 函数在页面上创建画布。 语法 Raphael(container width, height[, c... [阅读全文]