可视化软件 JsxGraph 探索 | 技术储备

前情概要

本博客中的图片，主要来源于以下几种情形：① 在几何画板或网络画板或其他软件中做好图片，截图为图片上传博客，缺点是不好修改；②在Desmos软件、网络画板中做好课件，然后用 iframe 框架嵌入博客，缺点是打印时常出问题；③ 今天尝试用代码作图成功，比如用 可视化软件 jsxgraph 探索做课件或作图，故做个记录。

案例探究

本案例是来自 https://jsxgraph.org/share/ 的一个课件，全部是代码，便于修改，便于打印，就是学习成本比较高，今天先探索让它们显示出来，下一步再研究如何用 AI 作图，获取作图代码，再嵌入博客即可。

代码备用

<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js" type="text/javascript"></script>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1;margin: 0 auto; width: 90%;" data-ar="2 / 1"></div>
</div>

<script type = "text/javascript"> 
const BOARDID = 'board-0';
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-1, 4, 8, -1.5],
keepaspectratio: true,
grid: true, // 显示网格
showNavigation: true, // 显示缩放/平移控件
showCopyright: false, // 隐藏版权信息
axisColor: '#333', // 坐标轴颜色
gridColor: '#e0e0e0', // 网格颜色
showFullscreen: true, //全屏按钮
axis: true, // 显示坐标轴
});

// 课件标题开始
var title = board.create('text', [
2.8, 3.7, '圆面积的近似逼近演示'
], {
fontSize: 22,
color: JXG.palette.blue,
fontWeight: 'bold',
fixed: false,  // 文字位置可以移动 true
});
// 课件标题结束

var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
board.update();
</script>

相关备查

https://jsxgraph.org/share/show/approximation-of-the-circle-area