本文由ScriptEcho平台提供技术支持
项目地址:传送门
基于JSXGraph的圆外公切圆作图
应用场景介绍
本代码可用于在线绘制圆外公切圆,在几何教学、图形设计等领域有广泛应用。
代码基本功能介绍
该代码使用JSXGraph库,实现以下功能:
- 创建两个圆和一个圆心连线
- 创建圆外公切圆
- 求出圆外公切圆与原圆的交点
- 绘制圆外公切圆的切线和半径
功能实现步骤及关键代码分析
1. 加载JSXGraph库
const loadJavascript = (jsUrl) => { ... }
const loadStyle = (styleUrl) => { ... }
使用loadJavascript
和loadStyle
函数加载JSXGraph库的JavaScript和CSS文件。
2. 创建JSXGraph画板
var brd = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-6, 6, 6, -6] })
使用initBoard
函数创建JSXGraph画板,并设置其边界框。
3. 创建圆、圆心连线和圆外公切圆
o1 = brd.create('point', [-2, 2], { name: 'O1' })
o2 = brd.create('point', [3, -3], { name: 'O2' })
p1 = brd.create('point', [-3, 5], { name: 'P1' })
p2 = brd.create('point', [2, -3], { name: 'P2' })
c1 = brd.create('circle', [o1, p1])
c2 = brd.create('circle', [o2, p2])
c3 = brd.create('circle', [m, o2], {
strokeColor: 'green',
strokeWidth: '1px',
})
创建两个圆c1
和c2
,以及一个圆心连线lm
。然后创建圆外公切圆c3
,其圆心为m
(两个原圆圆心的中点),半径为o2
到m
的距离。
4. 求圆外公切圆与原圆的交点
i1 = brd.create('intersection', [c3, c4, 0], { visible: true })
i2 = brd.create('intersection', [c3, c4, 1], { visible: true })
使用intersection
函数求出圆外公切圆c4
与原圆c1
和c2
的交点i1
和i2
。
5. 绘制圆外公切圆的切线和半径
l1 = brd.create('line', [o1, i1], { visible: false })
l2 = brd.create('line', [o1, i2], { visible: false })
i3 = brd.create('intersection', [c1, l1, 0], { visible: true })
i4 = brd.create('intersection', [c1, l2, 0], { visible: true })
v1 = brd.create('arrow', [o1, i3], {
strokeColor: 'lightblue',
strokeWidth: '1px',
})
v2 = brd.create('arrow', [o1, i4], {
strokeColor: 'lightblue',
strokeWidth: '1px',
})
l3 = brd.create('line', [i1, o1], { visible: false })
l4 = brd.create('line', [o1, i2], { visible: false })
t1 = brd.create('tangent', [c1, i3], { strokeColor: 'darkblue' })
t2 = brd.create('tangent', [c1, i4], { strokeColor: 'darkblue' })
t3 = brd.create('line', [o2, i1], { strokeColor: 'pink' })
t4 = brd.create('line', [o2, i2], { strokeColor: 'pink' })
创建辅助线l1
和l2
,并求出它们与原圆c1
的交点i3
和i4
。然后绘制圆外公切圆的切线t1
和t2
,以及连接圆心o2
和交点i1
和i2
的线段t3
和t4
。
总结与展望
通过这段代码,我们可以直观地绘制圆外公切圆,并探索其性质。在开发过程中,我收获了以下经验:
- 掌握JSXGraph库的使用,提高了图形绘制能力。
- 加深了对圆外公切圆的理解,提升了几何知识。
未来,可以考虑拓展该代码的功能,例如:
-
添加拖拽功能,允许用户交互式地移动圆和圆心连线。
-
探索圆外公切圆的其他性质,如圆心连线垂直平分线段
P1P2
。获取更多Echos
本文由ScriptEcho平台提供技术支持
项目地址:传送门
扫码加入AI生成前端微信讨论群: