深色画布上摆着六种彩色图形：点、直线、圆、三角形、矩形和一个箭头向量，中间有一个大的虚线圆——反演圆。拖动任何一个图形，它在这个圆内（或圆外）的反演像会立刻跟着重算重画。直线穿过圆心时像还是直线，不过圆心时像会变成一个过圆心的圆；圆被反演后可能翻到外面去，三角形的边则会全部弯成弧。底部有一排彩色图例对应六种图形。技术上用的是 p5.js 做绘制与拖拽，反演公式全部手写。

这个画板的三个看点

每种图形都有自己的反演规则。点直接套公式，直线和圆要先判断是否过圆心再分情况处理，多边形则是把每条边当作线段逐点采样再连成弧。
拖拽是逐顶点的。不只是整体移动，三角形和矩形的每个顶点都能单独拖，可以把图形拉进拉出反演圆看像的突变。
像是每帧重算的。没有缓存，拖动时看到的就是当前几何状态的实时结果，因此改公式后所见即所得。

反演到底在算什么

圆反演的定义很简单：把一个点沿着它与圆心的连线，移到「距离乘以新距离等于半径平方」的位置。离圆心越近的点被甩得越远，圆心本身没有像。这条规则带来一个反直觉的结论——直线和圆在反演下是同一类对象：不过圆心的直线会变成过圆心的圆，反之亦然。源码里判断这两种情况的分支，正是整份代码里最值得读的部分。多边形的处理则是工程上的折中：严格来说每条边的像是一段圆弧，源码选择对线段密集采样再连成折线，代码量小很多，视觉上看不出差别。

能改的地方

反演圆的圆心和半径是脚本里的变量，改半径会直接改变整幅图的「放大倍率」。六种图形的初始位置、配色都在各自的构造里，图例的颜色和标签在 HTML 上，两边要一起改。想增加图形类型，照着已有的模式补一个「画自身 + 画反演像」的对象即可。

常见问题

图形拖不动？

拖拽是按「鼠标离顶点多近算命中」判定的，顶点重叠时可能抓到下面那个。把命中半径调大一点，或者先把重叠的图形分开再拖。

手机上能用吗？

可以。p5.js 会把触摸映射成指针事件，单指拖动正常；只是画布按窗口尺寸铺满，小屏上图形会比较挤，建议配合缩小初始图形尺寸使用。

能导出图像吗？

能。p5.js 自带保存画布的方法，绑一个按钮调用即可导出当前状态的图片，适合做教学讲义。

适合用在哪

数学与几何教学页面、科普站点的互动插图、在线课程的演示模块，也适合当作 p5.js 交互绘图的入门参考。反演公式的分情况实现与拖拽判定都在脚本里，下载后可查看。