新增 JSXGraph 作图插件
一直在捉摸如何在wp中绘图, 今天终于得到如下灵感. 首先, 你会发现大多数浏览器都支持svg格式的”图片”, wiki下发现其实svg就是html的绘图语言. 这是我在学latex作图时看到Asymptote的那个wiki图标文件竟然是一层一层的渲染的, 这样我就知道其实html里是支持绘图语言的(准确说可能是要java脚本). 兴奋之余, 马上google了下wp的插件, 发现了一个哈哈: JSXGraph, 正常安装并启用插件后, 一个典型的例子如:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<jsxgraph width="500" height="500" box="box"> 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(); </jsxgraph> |
源代码是:
|
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<jsxgraph width="500" height="500" box="box"> 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(); </jsxgraph></pre> |
需要注意的一个问题
如果直接用上述插件, 可以发现点的坐标定位不是很准确. 按照插件的说明页, 我们发现它有一个可选说明: 把插件目录的js脚本和css分别删除, 那么将从jsxgraph-websit调用最新的js以及css, 这样做过后上述问题就解决了.
最后, 非常感谢这么强大的语言, 以及作者 Peter Wilfahrt 写的wp插件.
发表回复