基于JSXGraph的圆外公切圆作图

本文由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。

  更多组件：
  <img src="https://block-design.oss-cn-shenzhen.aliyuncs.com/haomo-ai/image/id-afdcede4f0c8cab8c2382c8063e9ee11.png" />

  获取更多Echos

  本文由ScriptEcho平台提供技术支持

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：