基于Raphael交互式绘图和显示动画

摘要: 试验在博客(Markdown+Octopress)中基于 raphael.js 交互式绘图和显示动画。

上面是Raphael官网的一个例子，可以拖动控制点绘图。

配置

从官网下载 raphael-min.js 到 source/javascripts/libs/。
在 source/_layouts/default.html 中增加引用：

1	<script src="{{ root_url }}/blog/javascripts/libs/raphael-min.js"></script>

插入绘图区域

在Markdown正文中插入div块：<div id="holder"></div>。
插入javascript绘图片段：

<script type="text/javascript">
  window.onload = function() {
  r = Raphael("holder", 宽, 高);
  r.circle(50, 40, 10).attr("fill", "#f00");
};
</script>

如果要插入多个绘图区域，则插入不同id的div，将上面的window.onload = function()改为多个函数对象（例如draw1 = function()），
然后插入如下的片段显示多个图形：

1
2
3

<script type="text/javascript">
  window.onload = function() { draw1(); draw2(); };
</script>

动画示例

参考资料

Raphael中文帮助文档(API)

分享到：更多