GGB数学云 基于JSXGraph实现交互式绘图

基于JSXGraph实现交互式绘图

2015年4月13日 人阅读 Markdown»JSXGraph

摘要: 试验在博客中嵌入JSXGraph绘图区,并绘制三角形的三心图。

简介

JSXGraph1是德国拜罗伊特大学研发的跨浏览器的交互式几何、函数作图、图表、数据可视化的轻量级JavaScript框架,使用SVG和VML。
支持 IE6 等很多浏览器,支持 iOS、Android、firefoxOS、Windows 8 上的多点触摸设备。开源协议为LGPL和MIT。

嵌入绘图区2

  • 在Head中引用JSXGraph

    • 下载jsxgraph.cssjsxgraphcore.js到stylesheets和javascripts/libs目录下。
    • source/_includes/custom/head.html 中引用JSXGraph:
1
2
<link href="{{ root_url }}/blog/stylesheets/jsxgraph.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bootcss.com/jsxgraph/0.99.3/jsxgraphcore.js"></script>
  • 插入一个绘图区

    • 在正文插入一个div块,指定绘图区宽高,class表示使用jsxgraph.css中的圆角边框样式。
1
<div id="holder" class="jxgbox" style="width:300px; height:100px;"></div>
  • 插入如下的js脚本显示一个空的绘图区。其中,boundingbox为模型坐标范围,由左上角和右下角的坐标决定模型坐标范围和坐标轴方向。
1
2
3
4
5
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('holder', {
boundingbox: [0, 20, 50, 0], axis:false,
showNavigation:false, showCopyright:false});
</script>
  • 在绘图区绘制三角形和顶点,效果见顶部图
1
2
3
4
5
var board = ...
var p1 = board.create('point',[5,5]),
p2 = board.create('point',[30,5]),
p3 = board.create('point',[20,15]);
board.create('polygon',[p1,p2,p3]);

综合样例

这里引用台湾一个中学做的三角形三心例子3,可以看出只用JSXGraph就能实现动态几何特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="triangle" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('triangle', {
boundingtriangle: [-10,10, 10,-10], showCopyright:false});
// 中线和垂线的样式
var cerise = {strokeColor: '#901B77', fillColor: '#CA147A',face:'x'},
perp1 = {strokeColor: 'purple', dash:2, strokeWidth:1,
point: JXG.deepCopy(cerise,{visible: true,withLabel: true})},
perp2 = {strokeColor: 'red', strokeWidth:1,
point: JXG.deepCopy(cerise,{visible: true,withLabel: true})}
// 画三角形及其顶点ABC
var p1 = board.create('point',[-5,-4],{name:'A',size:4}),
p2 = board.create('point',[-1.5,3],{name:'B',size:4}),
p3 = board.create('point',[3,2],{name:'C',size:4}),
triangle = board.create('polygon',[p1,p2,p3]);
// 画外接圆及其圆心O
board.create('circle',[p1,p2,p3]);
pcirc = board.create('circumcenter',[p1,p2,p3], {name:'O', color:'green'});
// 画中点、中线、中线交点G
pc = board.create('midpoint',[p1,p2],cerise);
pb = board.create('midpoint',[p1,p3],cerise);
pa = board.create('midpoint',[p2,p3],cerise);
la = board.create('segment',[p1,pa],{dash:1});
lb = board.create('segment',[p2,pb],{dash:1});
lc = board.create('segment',[p3,pc],{dash:1});
G = board.create('intersection',[la,lb], { color:'green'});
// 画中垂线
pABC = board.create('perpendicular', [triangle.borders[0], pc], perp1);
pBCA = board.create('perpendicular', [triangle.borders[1], pa], perp1);
pCAB = board.create('perpendicular', [triangle.borders[2], pb], perp1);
pA = board.create('perpendicular', [triangle.borders[0], p3], perp2);
pB = board.create('perpendicular', [triangle.borders[1], p1], perp2);
pC = board.create('perpendicular', [triangle.borders[2], p2], perp2);
H = board.create('intersection',[pA,pB], { color:'green'});
</script>

参考资料

  1. JSXGraph
  2. JSXGraph Commands
  3. 三角形的外心-重心-垂心
分享到: 更多