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.css和jsxgraphcore.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. 三角形的外心-重心-垂心
Drawing JavaScript JSXGraph 三心图
JSXGraph的图形类型 JavaScript：跨设备绘图的最佳选择
分享到： 更多