dojo 的绘图

dojo的文档做的真烂,像我这样的小菜鸟越啃越艰难.

唉,只有写代码实验了.

<html> <head> <title>Dojo: Hello World!</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> @import "../dojo_lib/dijit/themes/tundra/tundra.css"; @import "../dojo_lib/dojo/resources/dojo.css" </style> <mce:script type="text/javascript" src="../dojo_lib/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true, baseUrl: '../dojo_lib/dojo/'"></mce:script> </head> <body class="tundra"> <mce:script type="text/javascript"></mce:script> <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 300px; border: 1px solid #ccc;"> <div dojoType="dijit.layout.ContentPane" region="top">Top pane</div> <div id="canvas_div" dojoType="dijit.layout.ContentPane" region="center"></div> <div dojoType="dijit.layout.ContentPane" region="bottom">Bottom pane</div> </div> </body> </html>

要绘图,就要先搞个div之类的Dom Element, 然后建立一个surface

// 元素, 长,宽

var surface = dojox.gfx.createSurface(dojo.byId("canvas_div"), 200, 200);

//再建立一个group

var group = surface.createGroup();

//画个矩形,传个长宽做参数(这些东西都是蒙的,文档上啥都没有,郁闷)

灰常牛B哦,在FF和IE下效果一样

//画线这参数也是蒙的

var line1 = surface.createLine({x1: 10, y1: 5, x2: 100, y2: 50});
line1.setFill(new dojo.Color("black"));//设颜色
line1.setStroke({color: "#0", width: 3});//设宽度
group.add(line1);//加入group显示

然后我就发现了dojo的牛B之处了
            line1.getShape().x1 = 110; //重设线的位置
            line1.setShape(line1.getShape());//更新位置

这样其实dojo不是就画图就完了,dojo生成了一系列的vml或者SVG对象

从console的Dom查看器里看到

就是说你可以随便怎么操作你画的SVG对象.实现动画就灰常容易了.

不愧是IBM推的,品质保证啊.

有空就继续补充完成.