新增 JSXGraph 作图插件

Vanabel/ 6月 22, 2012/ 站点事务/ 0 comments

一直在捉摸如何在wp中绘图, 今天终于得到如下灵感. 首先, 你会发现大多数浏览器都支持svg格式的”图片”, wiki下发现其实svg就是html的绘图语言. 这是我在学latex作图时看到Asymptote的那个wiki图标文件竟然是一层一层的渲染的, 这样我就知道其实html里是支持绘图语言的(准确说可能是要java脚本). 兴奋之余, 马上google了下wp的插件, 发现了一个哈哈: JSXGraph, 正常安装并启用插件后, 一个典型的例子如:


var addPoint = function(x) {
  p.push(brd.create('point',
              [x,(Math.random()-0.5)*3],{style:6}));
  brd.update();
};
 
var brd = JXG.JSXGraph.initBoard('box',
           {axis:true,originX: 250, originY: 250, unitX: 50, unitY: 25});
brd.suspendUpdate();
var p = [];
p[0] = brd.create('point', [-4,2], {style:6});
p[1] = brd.create('point', [3,-1], {style:6});
addPoint(-2);
addPoint(0.5);
addPoint(1);
var pol = brd.lagrangePolynomial(p);
var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
var g2 = brd.create('functiongraph', [brd.D(pol), -10, 10],
                                      {dash:3, strokeColor:'#ff0000'});
brd.unsuspendUpdate();

源代码是:



 
var addPoint = function(x) {
  p.push(brd.create('point',
              [x,(Math.random()-0.5)*3],{style:6}));
  brd.update();
};
 
var brd = JXG.JSXGraph.initBoard('box',
           {axis:true,originX: 250, originY: 250, unitX: 50, unitY: 25});
brd.suspendUpdate();
var p = [];
p[0] = brd.create('point', [-4,2], {style:6});
p[1] = brd.create('point', [3,-1], {style:6});
addPoint(-2);
addPoint(0.5);
addPoint(1);
var pol = brd.lagrangePolynomial(p);
var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
var g2 = brd.create('functiongraph', [brd.D(pol), -10, 10],
                                      {dash:3, strokeColor:'#ff0000'});
brd.unsuspendUpdate();
</pre>

需要注意的一个问题

如果直接用上述插件, 可以发现点的坐标定位不是很准确. 按照插件的说明页, 我们发现它有一个可选说明: 把插件目录的js脚本和css分别删除, 那么将从jsxgraph-websit调用最新的js以及css, 这样做过后上述问题就解决了.

最后, 非常感谢这么强大的语言, 以及作者 Peter Wilfahrt 写的wp插件.

Share this Post

Leave a Comment

您的电子邮箱地址不会被公开。

*
*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据