hanyeahhttps://hanyeah.cn/blog/专注于ASRainbowSoft Studio Z-Blog 2.2 Prism Build 140101zh-CNMon, 13 Apr 2026 16:53:40 +0800haxe-openfl编译成exenull@null.com (hanyeah)https://hanyeah.cn/blog/post/haxe-openfl编译成exe.htmlMon, 13 Apr 2026 16:34:06 +0800https://hanyeah.cn/blog/post/haxe-openfl编译成exe.html用haxe openfl库开发应用，打包成exe。

用hashlink打包，没什么问题，haxelib run openfl build windows -hl -aot -32 -release

直接打包成exe，各种报错。haxelib run openfl build windows

用的minimingw，试过用mingw64和mingw32，该报错还是报错，并没有区别.

pcre2-8和pcre2-16报错，提示需要c99。

可以改这个库里边的build.xml，添加编译参数，如图：

<compilerflag value="-std=c99" />


Thread.cpp里边报错。

好像是加了这个。

<define name="HXCPP_WINXP_COMPAT" />

寄存器报错，加下边这个，据说是因为GC那里用汇编写了代码，不支持，所以不用汇编写的优化代码就可以了。

<haxedef name="HXCPP_NO_GC_REGISTERS" />

<haxedef name="HXCPP_M32" />

 <haxedef name="HXCPP_X86" />

<haxedef name="HXCPP_NO_X86_64" />

Process.cpp报错，直接改这里：

返回的时候，强制转int。


ApplicationMain.o链接报错，其实是因为ApplicationMain.rc没有生成ApplicationMain.o

可以手动生成。

E:\gitee\lianxi\haxe\experiment\Export\windows\obj> g++.exe -c -Wno-overflow -O2 -DHXCPP_VISIT_ALLOCS -DHX_SMART_STRINGS -DHXCPP_API_LEVEL=430 -DHXCPP_WINXP_COMPAT -DHX_WINDOWS -m32 -ID:/HaxeToolkit/haxe/lib/hxcpp/4,3,2/include ./ApplicationMain.rc -oE:/gitee/lianxi/haxe/experiment/Export/windows/obj/obj/mingw-nc/20eab515_ApplicationMain.o

g++.exe: warning: ./ApplicationMain.rc: linker input file unused because linking not done

这个没有生成。

E:\gitee\lianxi\haxe\experiment\Export\windows\obj>windres.exe -i ./ApplicationMain.rc -o "E:/gitee/lianxi/haxe/experiment/Export/windows/obj/obj/mingw-nc/20eab515_ApplicationMain.o" -I "D:/HaxeToolkit/haxe/lib/minimingw/1,0,0/include" -I "D:/HaxeToolkit/haxe/lib/vs_build/1,0,0/include" --include-dir="D:/HaxeToolkit/haxe/lib/hxcpp/4,3,2/include" -DHXCPP_WINXP_COMPAT -DHX_WINDOWS -DHXCPP_API_LEVEL=430

这个可以生成。手动调用windres.exe

需要加环境变量或者全路径执行这个exe，ApplicationMain.rc里边include了一个h文件，没有，从其他地方复制一个过来。

或者不生成，不链接这个。rc是什么可以搜索或者问AI。注释掉这两处就行。

最后strip报错的话，关掉杀毒软件，或者不要strip，命令行里边是-Dno-strip

<haxedef name="no-strip"/>


生成的exe在bin里边，缺少两个dll，从obj里边复制过去。


最后还是运行不起来。

家里电脑是Shader报错，公司电脑运行没任何反应。

可以win+x，然后“事件查看器”，windows日志，应用程序，查看错误。


折腾好几天，还不如直接用hashlink打包。


]]>其他https://hanyeah.cn/blog/post/haxe-openfl编译成exe.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=635JS实现半边缘数据结构-豆包null@null.com (hanyeah)https://hanyeah.cn/blog/post/JS实现半边缘数据结构-豆包.htmlFri, 13 Feb 2026 17:29:09 +0800https://hanyeah.cn/blog/post/JS实现半边缘数据结构-豆包.html和AI聊天，学习用 JavaScript 实现半边缘结构（half-edge），flash中的矢量图绘制就是用的半边缘数据结构。  

  用 JavaScript 实现半边缘结构 - 豆包

]]>算法https://hanyeah.cn/blog/post/JS实现半边缘数据结构-豆包.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=634压强引擎-流速计算-豆包null@null.com (hanyeah)https://hanyeah.cn/blog/post/压强引擎-流速计算-豆包.htmlFri, 13 Feb 2026 17:24:35 +0800https://hanyeah.cn/blog/post/压强引擎-流速计算-豆包.html和AI聊天，学习电路仿真计算，下面是聊天记录。

    压强引擎-流速计算 - 豆包

]]>算法https://hanyeah.cn/blog/post/压强引擎-流速计算-豆包.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=633电路计算-改进的结点电压法-豆包null@null.com (hanyeah)https://hanyeah.cn/blog/post/电路计算-改进的结点电压法-豆包.htmlFri, 13 Feb 2026 17:17:24 +0800https://hanyeah.cn/blog/post/电路计算-改进的结点电压法-豆包.html和AI聊天，学习电路仿真计算，下面是聊天记录。

电路计算思路 - 豆包

]]>算法https://hanyeah.cn/blog/post/电路计算-改进的结点电压法-豆包.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=632两个贝塞尔曲线交叉-交点生成新的控制点null@null.com (hanyeah)https://hanyeah.cn/blog/post/两个贝塞尔曲线交叉-交点生成新的控制点.htmlWed, 10 Dec 2025 15:02:24 +0800https://hanyeah.cn/blog/post/两个贝塞尔曲线交叉-交点生成新的控制点.html以下内容来自AI。

好的，你问的是 两个贝塞尔曲线交叉，并且希望在交点处生成新的控制点（锚点）的算法。
这个问题本质上是 曲线相交检测 + 曲线分割，在矢量绘图软件（如 Adobe Illustrator、Flash Animate）中，布尔运算、路径分割等功能其实就是基于这个原理实现的。

1. 问题拆解

我们有两条贝塞尔曲线：

  • 第一条：

    ，参数 

  • 第二条：

    ，参数 

目标：

  1. 找到它们的交点坐标 

  2. 确定交点在两条曲线上的参数位置 

  3. 在交点处将原曲线分割成新的曲线段

  4. 为新的锚点生成合适的控制点（保持曲线光滑）

2. 交点求解算法

2.1 贝塞尔曲线方程（以三次为例）

三次贝塞尔曲线：

其中：

  • ：起点锚点

  • ：起点方向控制点

  • ：终点方向控制点

  • ：终点锚点

2.2 相交检测

两条曲线相交意味着：

这是一个二维非线性方程组：

可用的数值方法：

  • 递归包围盒法（Bounding Box Subdivision）：
    递归细分曲线段的包围盒，检测是否重叠，缩小范围直到精度足够

  • 牛顿迭代法（Newton-Raphson）：
    用初值迭代求解 

    ，需要一个初步猜测

  • Bezier Clipping：
    专门针对贝塞尔曲线的高效相交算法（Adobe 等软件常用）

3. 曲线分割（De Casteljau 算法）

找到交点参数  后，可以用 De Casteljau 算法 将曲线在  处精确分割成两条新的贝塞尔曲线。

De Casteljau 步骤：

  1. 在原曲线的四个控制点之间做线性插值，得到中间点

  2. 重复插值，直到得到分割点（交点）以及两段曲线的新控制点

  3. 这样可以保证分割后的曲线形状完全一致，不会产生误差

4. 生成新的控制点

4.1 如果要保持曲线光滑

  • 新的锚点（交点）需要有两个方向控制点：

    • 入方向控制点：沿着原曲线的切线方向，距离与原曲线对应位置的控制点长度一致

    • 出方向控制点：同理，沿着另一段曲线的切线方向

  • 切线方向可以通过贝塞尔曲线的一阶导数计算：

在  处计算该向量并归一化，然后乘以原控制点距离得到新控制点位置

4.2 如果交点是曲线分割点

  • 分割后，每段曲线的末端锚点和控制点就是 De Casteljau 算法直接给出的结果

  • 这样可以保证曲线在交点处无缝连接

5. 算法流程总结

plaintext复制输入：两条贝塞尔曲线的控制点坐标输出：交点坐标、新的锚点及控制点

1. 用 Bezier Clipping 或递归包围盒法求交点参数 t0, s0
2. 用 De Casteljau 算法在 t0 和 s0 处分别分割两条曲线
3. 得到交点坐标 P
4. 从分割结果中直接获取交点处的方向控制点
5. 将交点插入到曲线数据结构中，形成新的锚点
两个贝塞尔曲线交叉时，生成新控制点的核心逻辑是先求精准交点，再拆分两条原曲线，最后通过曲线连续性规则确定新控制点，确保拆分后的曲线在交点处平滑衔接或保持原有形态。以下是适配主流设计软件逻辑的完整算法流程，以常用的三阶贝塞尔曲线为例详细说明：

  1. 步骤 1：求解两条贝塞尔曲线的精准交点

    首先要确定两条曲线交叉处的坐标及对应参数，常用边界框裁剪 + 牛顿迭代法，该方法兼顾效率与精度，也是 Adobe 系列软件的常用底层方案，步骤如下：

    1. 边界框初筛：为两条曲线（设为曲线 A：P0-P1-P2-P3；曲线 B：Q0-Q1-Q2-Q3）分别生成边界框（包含曲线所有点的最小矩形）。若边界框无重叠，直接判定无交点；若重叠，将两条曲线按德卡斯特里奥算法细分，重复边界框判断，剔除无交集的细分段。

    2. 牛顿迭代求精：当细分后的曲线段接近直线时，设曲线 A 的参数为 s（s∈[0,1]），曲线 B 的参数为 t（t∈[0,1]），曲线方程分别为 A (s)、B (s)。构造误差函数 F (s,t)=[A_x (s)-B_x (t),A_y (s)-B_y (t)]，通过牛顿迭代求解 F (s,t)=0 的解，最终得到交点 O，以及对应的参数 s₀、t₀，即 O=A (s₀)=B (t₀)。

  2. 步骤 2：拆分两条原曲线，确定交点处的基础锚点

    利用德卡斯特里奥算法，分别将两条原曲线按交点对应的参数拆分为两段，交点 O 会成为两条拆分后曲线的公共锚点：

    • 拆分曲线 A：按参数 s₀拆分为 A1（P0-P1a-P2a-O）和 A2（O-P1b-P2b-P3），其中 P1a、P2a 是拆分后第一段曲线的控制点，P1b、P2b 是第二段的控制点。

    • 拆分曲线 B：按参数 t₀拆分为 B1（Q0-Q1a-Q2a-O）和 B2（O-Q1b-Q2b-Q3），同理 Q1a、Q2a 和 Q1b、Q2b 是拆分后两段曲线的控制点。

  3. 步骤 3：根据衔接需求生成新控制点

    新控制点的生成核心是保证拆分后曲线在交点 O 处的连续性，分 “平滑衔接” 和 “尖角衔接” 两种常见场景，对应不同的控制点生成规则：

    衔接类型新控制点生成逻辑具体操作
    平滑衔接（适用于需要曲线连续顺滑的场景，如 AI 中路径合并）交点 O 作为平滑锚点，需保证拆分后相邻曲线在 O 点的切线共线，因此新控制点需在同一直线上1. 取曲线 A 拆分后 A1 的末端控制点 P2a，延长 P2a-O 线段至 O 的另一侧，取点 C1，使 O 到 C1 的距离与 O 到 P2a 的距离按原曲线弧度比例设定；
    2. 取曲线 B 拆分后 B1 的末端控制点 Q2a，调整 Q2a 的位置，使 C1-O-Q2a 三点共线；
    3. C1 和 Q2a 即为交点 O 处的新控制点，分别关联 A2 的起点和 B2 的起点，确保两段曲线在 O 点平滑过渡。
    尖角衔接（适用于需要折线转折的场景，如 Flash 中路径转折）交点 O 作为尖角锚点，两条曲线在 O 点的切线可独立，新控制点无需共线1. 曲线 A 拆分后的 A2 保留拆分得到的控制点 P1b，该点作为 O 点关联 A2 的新控制点，决定 A2 起始段的弧度；
    2. 曲线 B 拆分后的 B2 保留拆分得到的控制点 Q1b，作为 O 点关联 B2 的新控制点，决定 B2 起始段的弧度；
    3. 两个新控制点无共线约束，最终两条曲线在 O 点形成折线转折。

  4. 步骤 4：优化与修正，适配软件实操逻辑

    实际算法中还需补充细节优化，匹配 AI、Flash 的操作体验：

    • 距离约束：新控制点与交点 O 的距离，默认继承原曲线拆分后控制点到 O 的距离比例，避免曲线弧度突变。例如曲线 A 拆分后 P2a 到 O 的距离为 d，新控制点 C1 到 O 的距离可设为 d，保证 A1 与 A2 的弧度连贯性。

    • 特殊情况处理：若两条曲线部分重合（非单点相交），则在重合段均匀取多个拆分点，每个拆分点按上述逻辑生成对应的新控制点，确保重合段的曲线形态一致。

简化代码示例（核心逻辑）

以下代码基于 JavaScript 实现交点拆分与新控制点生成的核心逻辑，聚焦平滑衔接场景：
javascript
运行
// 线性插值函数function lerp(a, b, t) {
    return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };}// 拆分三阶贝塞尔曲线function splitCubic(p0, p1, p2, p3, t) {
    const q0 = lerp(p0, p1, t), q1 = lerp(p1, p2, t), q2 = lerp(p2, p3, t);
    const r0 = lerp(q0, q1, t), r1 = lerp(q1, q2, t);
    const o = lerp(r0, r1, t);
    return { left: [p0, q0, r0, o], right: [o, r1, q2, p3] };}// 生成平滑衔接的新控制点function genSmoothControls(curveA, s0, curveB, t0) {
    // 拆分两条曲线
    const splitA = splitCubic(...curveA, s0);
    const splitB = splitCubic(...curveB, t0);
    const o = splitA.right[0]; // 交点
    const ctrlA = splitA.left[2]; // 曲线A拆分后的末端控制点
    // 生成曲线A侧新控制点C1（与ctrlA关于O对称）
    const c1 = { x: 2 * o.x - ctrlA.x, y: 2 * o.y - ctrlA.y };
    // 生成曲线B侧新控制点C2（与C1共线，此处简化取同方向）
    const c2 = { x: o.x + (c1.x - o.x), y: o.y + (c1.y - o.y) };
    return { newAnchor: o, ctrlA: c1, ctrlB: c2 };}// 示例：两条三阶贝塞尔曲线const curveA = [{x:50,y:200},{x:100,y:50},{x:300,y:50},{x:350,y:200}];const curveB = [{x:50,y:50},{x:150,y:250},{x:250,y:250},{x:350,y:50}];const s0 = 0.5, t0 = 0.5; // 假设交点对应的参数const result = genSmoothControls(curveA, s0, curveB, t0);console.log("交点锚点:", result.newAnchor);console.log("曲线A新控制点:", result.ctrlA);console.log("曲线B新控制点:", result.ctrlB);
该算法的核心是通过拆分曲线保证形态不变，再通过控制点的位置约束实现不同的衔接效果，这也是 AI 中路径合并、Flash 中矢量图编辑等功能的底层核心逻辑。


]]>算法https://hanyeah.cn/blog/post/两个贝塞尔曲线交叉-交点生成新的控制点.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=631贝塞尔曲线拖动锚点时-控制点如何变化null@null.com (hanyeah)https://hanyeah.cn/blog/post/贝塞尔曲线拖动锚点时-控制点如何变化.htmlWed, 10 Dec 2025 14:59:29 +0800https://hanyeah.cn/blog/post/贝塞尔曲线拖动锚点时-控制点如何变化.html以下内容来自AI。

好的，你问的是 Adobe Illustrator（AI）、Flash（Animate）等图形软件 中，在拖动贝塞尔曲线的锚点时，控制点（handles）是如何变化的。

其实这涉及到 贝塞尔曲线的交互编辑规则，不同软件的实现略有差异，但核心都是围绕 锚点（anchor point） 和 方向控制点（direction handles） 的关系来做的。

1. 基本概念

在三次贝塞尔曲线中，一个锚点有：

  • 位置：曲线在该点的坐标

  • 两个方向控制点（又叫方向杆、handle、控制柄）：

    • 入方向点（in handle）：控制曲线进入该锚点的切线方向和长度

    • 出方向点（out handle）：控制曲线离开该锚点的切线方向和长度

控制点的作用：

  • 方向：切线方向决定曲线的弯曲方向

  • 长度：控制点距离锚点的长度决定曲线的弯曲程度（曲率）

2. 拖动锚点时的变化规则

2.1 普通拖动锚点（不按特殊键）

  • 锚点位置：直接改变

  • 控制点位置：相对锚点保持不变（即控制点的向量会随锚点一起移动）

  • 结果：曲线整体平移或局部形状改变，但控制点相对锚点的距离和方向保持原样。

2.2 拖动控制点（方向杆）

  • 如果是 平滑点（Smooth Point）：

    • 两个控制点在同一条直线上，方向相反

    • 拖动一个控制点，另一个会自动跟着调整方向（保持共线），但长度比例可能不同（取决于软件设置）

  • 如果是 角点（Corner Point）：

    • 两个控制点互不影响，可以单独调整入方向或出方向

    • 常用于锐角或折线样式

3. Adobe Illustrator 的具体规则

在 Illustrator 中：

  • 平滑点：拖动一个方向杆，另一方向杆会自动保持共线，但长度可以不同

  • 角点：拖动一个方向杆，不会影响另一方向杆

  • 转换锚点工具：可以把平滑点变成角点，或反之

  • 拖动锚点本身：控制点位置会随锚点的移动而整体平移（向量保持不变）

4. Flash（Animate）中的规则

Flash 也是类似的：

  • 曲线段的控制点：通过锚点的 handles 控制曲率

  • 拖动锚点：控制点相对位置保持不变

  • 拖动控制点：如果是平滑点，两边控制点共线；如果是角点，互不影响

5. 数学上的变化

假设锚点位置为 ，入方向控制点为 ，出方向控制点为 ：

  • 拖动锚点时：

    其中 

     是锚点的位移向量

  • 拖动控制点时：

    • 平滑点：

      保持共线，k 为长度比例

    • 角点：另一控制点不变

✅ 总结：

  • 拖动锚点 → 控制点一起平移，形状相对保持

  • 拖动控制点 → 根据锚点类型（平滑/角点）决定另一控制点是否联动

  • AI、Flash 都遵循这个交互逻辑，只是细节和快捷键不同


]]>算法https://hanyeah.cn/blog/post/贝塞尔曲线拖动锚点时-控制点如何变化.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=630贝赛尔曲线添加锚点-不改变曲线形状null@null.com (hanyeah)https://hanyeah.cn/blog/post/贝赛尔曲线添加锚点-不改变曲线形状.htmlWed, 10 Dec 2025 14:55:42 +0800https://hanyeah.cn/blog/post/贝赛尔曲线添加锚点-不改变曲线形状.html以下内容来自AI。

在贝塞尔曲线上添加锚点且不改变曲线形状，核心算法是德卡斯特里奥（De Casteljau）算法。该算法能将一段贝塞尔曲线按指定参数 t 拆分为两段相连的同阶贝塞尔曲线，新增的锚点就是拆分处的曲线点，两段新曲线拼接后与原曲线完全重合，以此实现无形状变化的锚点添加。以下是具体实现逻辑、步骤及代码示例：

  1. 核心原理铺垫

    贝塞尔曲线的核心是通过参数 t（t∈[0,1]）描述曲线上的位置。比如三阶贝塞尔曲线由起点 P0、两个控制点 P1/P2、终点 P3 定义，曲线上任意点 B (t) 可通过线性插值逐步计算得出。De Casteljau 算法的优势在于，拆分时不仅能确定拆分点（新增锚点），还能精准计算出两段新曲线的所有控制点，确保拆分前后曲线形态一致。

  2. 通用实现步骤

    以最常用的三阶贝塞尔曲线为例，完整的锚点添加流程如下：

    • 第一次线性插值：在各控制点连线上按 t 值取点，得到 Q0、Q1、Q2。其中 Q0 是 P0 和 P1 的插值点，Q1 是 P1 和 P2 的插值点，Q2 是 P2 和 P3 的插值点，插值公式为L(a,b,t)=a+(b-a)*t。

    • 第二次线性插值：对第一次得到的点继续按 t 值插值，得到 R0、R1。R0 是 Q0 和 Q1 的插值点，R1 是 Q1 和 Q2 的插值点。

    • 第三次线性插值：对 R0 和 R1 按 t 值插值，得到拆分点 S，这个 S 就是曲线上 t 对应的点，也是新增的锚点。

    1. 确定拆分参数 t：先获取用户点击或选中的曲线位置，计算该位置对应的参数 t。具体是通过求点击点到曲线的最近点，遍历曲线计算距离后，确定距离最近点对应的 t 值（t∈(0,1)），该点就是新增锚点的位置。

    2. 应用 De Casteljau 算法拆分曲线：对原三阶贝塞尔曲线（P0,P1,P2,P3）执行算法，生成两段新的三阶贝塞尔曲线，步骤如下：

    3. 确定两段新曲线的控制点：拆分后得到的两段三阶贝塞尔曲线，控制点已由上述插值过程确定。第一段曲线的控制点为（P0, Q0, R0, S），第二段为（S, R1, Q2, P3）。两段曲线拼接处就是锚点 S，且平滑无断点，与原曲线完全一致。

  3. 代码示例（三阶贝塞尔曲线）

    以下代码基于 JavaScript 实现，输入原曲线控制点和拆分参数 t，输出拆分后的两段曲线数据，新增锚点即为拆分点 S：

javascript
运行
// 线性插值函数：计算两点a、b在参数t处的插值点function lerp(a, b, t) {
  return {
    x: a.x + (b.x - a.x) * t,
    y: a.y + (b.y - a.y) * t  };}// 拆分三阶贝塞尔曲线，返回两段新曲线function splitCubicBezier(p0, p1, p2, p3, t) {
  // 第一次插值
  const q0 = lerp(p0, p1, t);
  const q1 = lerp(p1, p2, t);
  const q2 = lerp(p2, p3, t);

  // 第二次插值
  const r0 = lerp(q0, q1, t);
  const r1 = lerp(q1, q2, t);

  // 第三次插值，得到拆分点（新增锚点）
  const s = lerp(r0, r1, t);

  // 两段新的三阶贝塞尔曲线
  const curve1 = { p0, p1: q0, p2: r0, p3: s };
  const curve2 = { p0: s, p1: r1, p2: q2, p3 };

  return { curve1, curve2, newAnchor: s };}// 示例：原曲线控制点const p0 = { x: 50, y: 200 };const p1 = { x: 100, y: 50 };const p2 = { x: 300, y: 50 };const p3 = { x: 350, y: 200 };const t = 0.4; // 拆分参数// 执行拆分const result = splitCubicBezier(p0, p1, p2, p3, t);console.log("新增锚点：", result.newAnchor);console.log("第一段曲线控制点：", result.curve1);console.log("第二段曲线控制点：", result.curve2);

  1. 拓展到其他阶次曲线

    该逻辑可适配不同阶次的贝塞尔曲线：

    • 二阶贝塞尔曲线（P0,P1,P2）：只需两次线性插值。先插值得到 Q0（P0-P1）、Q1（P1-P2），再插值 Q0-Q1 得到拆分点 S。新曲线为（P0,Q0,S）和（S,Q1,P2）。

    • 高阶贝塞尔曲线：阶数为 n 时，需执行 n 次线性插值，最终同样能拆分为两段同阶曲线，新增锚点为最终插值点，保证曲线形状不变。

这种算法是 Illustrator、Figma 等设计工具添加锚点功能的底层逻辑，也是实现 Flash 中矢量图锚点编辑的核心技术之一。


在一条已有的贝塞尔曲线上增加一个锚点（分割曲线），但曲线的形状保持完全不变。

这类操作的核心算法是 De Casteljau（德卡斯特里奥）算法，它可以在任意参数  处，将一条贝塞尔曲线精确拆分成两段新的贝塞尔曲线，这两段拼接起来与原曲线完全一致。

1. 基本原理

对于一个 n 阶贝塞尔曲线（n=2 为二次，n=3 为三次等），控制点为：

在参数  处，De Casteljau 算法通过线性插值得到一系列中间点，直到得到曲线上对应的点 ，同时得到两组新的控制点：

  • 第一组控制点定义左半段曲线

  • 第二组控制点定义右半段曲线

2. 三次贝塞尔示例

原控制点：

plaintext复制P0, P1, P2, P3

算法步骤（t 为分割位置，比如 t=0.5 表示中点）：

  1. 第一次插值

    plaintext复制P01 = (1-t)*P0 + t*P1P12 = (1-t)*P1 + t*P2
P23 = (1-t)*P2 + t*P3

  2. 第二次插值

    plaintext复制P012 = (1-t)*P01 + t*P12P123 = (1-t)*P12 + t*P23

  3. 第三次插值（曲线上点）

    plaintext复制Q = (1-t)*P012 + t*P123

  4. 结果

    • 左半段控制点：P0, P01, P012, Q

    • 右半段控制点：Q, P123, P23, P3

这两条三次贝塞尔曲线拼起来就是原曲线，Q 就是新增的锚点。

3. 代码示例（JavaScript）

javascript复制function splitCubicBezier(P0, P1, P2, P3, t) {  function lerp(a, b, t) {    return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };  }  const P01 = lerp(P0, P1, t);  const P12 = lerp(P1, P2, t);  const P23 = lerp(P2, P3, t);  const P012 = lerp(P01, P12, t);  const P123 = lerp(P12, P23, t);  const Q = lerp(P012, P123, t);  return {    left:  [P0, P01, P012, Q],    right: [Q, P123, P23, P3]  };}

调用示例：

javascript复制const P0 = {x:0, y:0}, P1 = {x:10, y:15}, P2 = {x:20, y:15}, P3 = {x:30, y:0};const result = splitCubicBezier(P0, P1, P2, P3, 0.5);console.log(result.left, result.right);

4. 特点

  • 形状完全不变：因为只是数学上拆分曲线。

  • 适用任意阶贝塞尔：不仅是三次，二次、一阶都可以用同样的递归插值方法。

  • 可多次分割：可以在不同 t 上反复分割，得到多个锚点。


]]>算法https://hanyeah.cn/blog/post/贝赛尔曲线添加锚点-不改变曲线形状.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=629用贝塞尔曲线生成圆null@null.com (hanyeah)https://hanyeah.cn/blog/post/用贝塞尔曲线生成圆.htmlWed, 10 Dec 2025 14:51:21 +0800https://hanyeah.cn/blog/post/用贝塞尔曲线生成圆.html以下内容通过AI生成。

贝塞尔曲线（你提到的 “内塞尔曲线” 应为笔误）中，二次贝塞尔曲线无法精准生成圆（仅能近似），而四次贝塞尔曲线或由 4 段三次贝塞尔曲线拼接可实现高精度圆形（工业设计、矢量绘图软件如 Flash/AI 的圆形本质就是这种拼接方案）。以下从原理、实现方法、代码示例三方面详细说明，兼顾理论与实操：

一、核心原理：贝塞尔曲线与圆的适配逻辑

圆是 “等距曲线”（任意点到圆心距离相等），而贝塞尔曲线是 “参数多项式曲线”，无法通过单一低阶贝塞尔曲线完全拟合圆，但可通过多段拼接逼近圆形：

  • 二次贝塞尔曲线（1 个控制点）：仅能生成抛物线，拟合圆的误差极大（边缘会明显扁平）；

  • 三次贝塞尔曲线（2 个控制点）：单段仍无法精准拟合，但用 4 段三次贝塞尔曲线（分别对应圆的 4 个象限），通过合理设置控制点位置，可使误差控制在 0.01% 以内（人眼无法分辨）；

  • 四次贝塞尔曲线（3 个控制点）：单段可近似生成半圆，两段拼接即可成圆，但控制点计算更复杂，不如 4 段三次贝塞尔曲线常用。

工业标准方案：矢量软件（如 Flash、Illustrator、Inkscape）的圆形，均采用「4 段三次贝塞尔曲线拼接」，以下重点讲解这种实现方式。

二、4 段三次贝塞尔曲线生成圆的关键参数

假设要生成一个圆心在原点 (0,0)、半径为 r的圆，4 段贝塞尔曲线分别对应：

  1. 第 1 段：从右端点 (r, 0) → 上端点 (0, r)（第一象限）；

  2. 第 2 段：从上端点 (0, r) → 左端点 (-r, 0)（第二象限）；

  3. 第 3 段：从左端点 (-r, 0) → 下端点 (0, -r)（第三象限）；

  4. 第 4 段：从下端点 (0, -r) → 右端点 (r, 0)（第四象限）。

核心：控制点坐标计算（关键系数 k≈0.55228475）

每段三次贝塞尔曲线需要 2 个控制点，4 段共 8 个控制点，坐标规律如下（基于几何对称性，仅需计算第一象限，其余象限镜像即可）：
曲线段起点 (S)控制点 1 (C1)控制点 2 (C2)终点 (E)
第 1 段(r, 0)(r, k*r)(k*r, r)(0, r)
第 2 段(0, r)(-k*r, r)(-r, k*r)(-r, 0)
第 3 段(-r, 0)(-r, -k*r)(-k*r, -r)(0, -r)
第 4 段(0, -r)(k*r, -r)(r, -k*r)(r, 0)

  • 系数 k 的由来：通过 “圆上点到贝塞尔曲线的最大距离最小化” 计算得出，k≈0.55228475（该值为行业标准，确保 4 段曲线拼接后无明显棱角，平滑度接近完美圆）。

三、实操实现：代码示例（可直接运行）

以下提供两种常见场景的代码实现，分别对应「网页 Canvas 绘制」和「SVG 矢量图导出」（均为标准技术，可直接用于设计工具或开发）：

1. Canvas 绘制圆（浏览器 / 前端开发常用）

通过 Canvas 的bezierCurveTo()方法（绘制三次贝塞尔曲线），按上述参数拼接 4 段曲线，生成高精度圆：
html
预览
<!DOCTYPE html><html><body><canvas id="circleCanvas" width="400" height="400"></canvas><script>// 1. 获取Canvas上下文const ctx = document.getElementById('circleCanvas').getContext('2d');// 2. 配置圆的参数（圆心x, 圆心y, 半径r）const centerX = 200;const centerY = 200;const radius = 150;const k = 0.55228475; // 关键系数// 3. 开始绘制路径ctx.beginPath();// 移动到起点（右端点）ctx.moveTo(centerX + radius, centerY);// 第1段：右→上（第一象限）ctx.bezierCurveTo(
  centerX + radius, centerY + k*radius, // 控制点1
  centerX + k*radius, centerY + radius, // 控制点2
  centerX, centerY + radius             // 终点（上端点）);// 第2段：上→左（第二象限）ctx.bezierCurveTo(
  centerX - k*radius, centerY + radius, // 控制点1
  centerX - radius, centerY + k*radius, // 控制点2
  centerX - radius, centerY             // 终点（左端点）);// 第3段：左→下（第三象限）ctx.bezierCurveTo(
  centerX - radius, centerY - k*radius, // 控制点1
  centerX - k*radius, centerY - radius, // 控制点2
  centerX, centerY - radius             // 终点（下端点）);// 第4段：下→右（第四象限）ctx.bezierCurveTo(
  centerX + k*radius, centerY - radius, // 控制点1
  centerX + radius, centerY - k*radius, // 控制点2
  centerX + radius, centerY             // 终点（右端点，闭合圆）);// 4. 设置样式并渲染ctx.strokeStyle = '#000'; // 边框颜色ctx.lineWidth = 2;        // 边框粗细ctx.stroke(); // 绘制轮廓（若要填充，用ctx.fill()）</script></body></html>

  • 运行效果：在浏览器中打开该 HTML 文件，会显示一个平滑的圆形，缩放后无锯齿（纯矢量特性）；

  • 调整radius可改变圆的大小，调整centerX/centerY可改变圆心位置。

2. SVG 导出圆（矢量图格式，可直接用 Inkscape / 即时设计编辑）

SVG 原生支持贝塞尔曲线（<path>标签的d属性），以下代码直接生成矢量圆，可保存为.svg文件使用：

  • 代码说明：

    • M 350 200：移动到起点（200+150, 200）；

    • C x1 y1 x2 y2 x y：三次贝塞尔曲线指令（x1,y1 = 控制点 1，x2,y2 = 控制点 2，x,y = 终点）；

    • Z：闭合路径；

    • 其中k*r=0.55228475*150≈82.84，所以控制点坐标简化为整数（误差可忽略）；

  • 使用方式：将代码保存为circle.svg，用矢量软件打开后，可直接拖拽锚点修改形状（如之前 Flash 的操作逻辑），也可缩放 / 编辑颜色。

四、关键补充：为什么不用单一贝塞尔曲线？

  • 二次贝塞尔曲线（1 个控制点）：比如用Q指令尝试拟合圆，会出现 “上下扁平、左右突出” 的椭圆状，误差超过 5%，无法满足设计需求；

  • 三次贝塞尔曲线（单段）：最多只能拟合圆的 1/4（一个象限），单段拟合半圆或整圆时，边缘会严重失真；

  • 4 段拼接的优势：通过对称性和精准的 k 值，使每段曲线与圆弧的偏差小于 0.01%，视觉上完全等同于完美圆，且符合矢量软件的底层实现逻辑（比如 Flash 的圆形工具，本质就是这种 4 段贝塞尔曲线拼接）。

五、实际应用场景

  1. 设计工具中：用钢笔工具手动绘制圆时，可按上述控制点位置放置锚点，生成自定义大小的矢量圆；

  2. 开发中：通过 Canvas/SVG 代码生成圆形，确保网页 / APP 中的图形缩放不失真；

  3. 替代 Flash：若需在在线矢量工具（如即时设计）中复刻 Flash 的圆形绘制逻辑，可直接导入上述 SVG，或按 4 段贝塞尔曲线的参数用钢笔工具绘制。

总结：用 4 段三次贝塞尔曲线（k≈0.55228475）拼接，是生成高精度矢量圆的标准方案，也是 Flash、AI 等工具的底层实现方式，兼具灵活性（可拖拽锚点修改）和矢量特性（无限缩放）。

用贝塞尔曲线生成圆是一个非常经典的图形学问题。需要明确的是：贝塞尔曲线无法“完美”地表示一个真正的圆，只能无限逼近。

在实际开发中（如 Canvas、SVG、矢量绘图软件），最通用的做法是用 4 段三次贝塞尔曲线 拼接成一个圆。

以下是具体的算法原理和实现步骤：

1. 核心公式：神奇常数 

要用一段三次贝塞尔曲线拟合 （即 1/4）圆弧，控制点的长度必须是一个特定的比例系数。这个系数通常被称为 Magic Number：

简单来说，如果圆的半径是 ，那么控制点到锚点的距离  就是： 

2. 构造 4 段曲线

我们将圆分为四个象限（0°~90°, 90°~180°, 180°~270°, 270°~360°）。假设圆心在 ，半径为 ，常数 。

这四段曲线的坐标点如下（按顺时针方向）：

曲线段起点 (Start)控制点 1 (CP1)控制点 2 (CP2)终点 (End)
第 1 段 (右下)



第 2 段 (右上)



第 3 段 (左上)



第 4 段 (左下)



(注：坐标系方向可能因平台而异，以上是以数学坐标系为例，Y轴向上。如果是屏幕坐标系Y轴向下，只需将Y坐标取反即可。)

3. 代码实现示例 (Python)

这是一个生成单位圆（半径=1）控制点的简单 Python 示例：

python复制import matplotlib.pyplot as pltimport numpy as npdef get_circle_bezier_points(radius=1.0, center=(0, 0)):    # 神奇常数    kappa = 0.552284749831    offset = radius * kappa    cx, cy = center        # 定义四个锚点    p0 = (cx, cy + radius)      # 上 (0, R)    p1 = (cx + radius, cy)      # 右 (R, 0)    p2 = (cx, cy - radius)      # 下 (0, -R)    p3 = (cx - radius, cy)      # 左 (-R, 0)        # 定义四段曲线的控制点    # 每一段由：起点, 控制点1, 控制点2, 终点 组成    segments = [        # 第一段：上 -> 右        [p0, (cx + offset, cy + radius), (cx + radius, cy + offset), p1],        # 第二段：右 -> 下        [p1, (cx + radius, cy - offset), (cx + offset, cy - radius), p2],        # 第三段：下 -> 左        [p2, (cx - offset, cy - radius), (cx - radius, cy - offset), p3],        # 第四段：左 -> 上        [p3, (cx - radius, cy + offset), (cx - offset, cy + radius), p0]    ]    return segments# 打印数据查看segments = get_circle_bezier_points(100) # 半径100for i, seg in enumerate(segments):    print(f"第 {i+1} 段曲线控制点: {seg}")

4. 为什么不用更多段？

  • 4段（每段90度）：这是最常用的平衡点，误差极小（约 0.0196%），肉眼几乎无法分辨。

  • 少于4段：如果只用 2 段（每段180度），拟合出来的形状会明显变“方”，像一个圆角菱形，误差很大。

  • 多于4段：虽然精度会提高，但计算量增加，对于大多数 UI 和图形应用来说没有必要。

总结

要在代码中画圆，记住这个核心：把圆切成 4 瓣，每一瓣的控制点长度设为半径的 0.552 倍。


]]>算法https://hanyeah.cn/blog/post/用贝塞尔曲线生成圆.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=628场景信息保存-视口区域null@null.com (hanyeah)https://hanyeah.cn/blog/post/场景信息保存-视口区域.htmlMon, 01 Sep 2025 11:49:40 +0800https://hanyeah.cn/blog/post/场景信息保存-视口区域.html在开发一些有舞台区域的工具的时候，会遇到需要保存当前场景的需求。

一般，场景是可以平移和等比缩放，不可以旋转的。

最容易想到的是，我们直接保存场景的平移信息和缩放信息：x,y,scale。

这样很直观，但是存在一个问题，对于不同分辨率的设备，显示的区域不一样。

不同分辨率，显示区域不一样，就会引发一些问题，比如自己保存的，可能每次用新的设备打开，都要重新调整一次。

如果实现了远程同步（协作）功能，不同用户看到的内容不一样，问题更严重。

场景的平移和缩放

我们可以保存场景的视口区域。

我们可以自己规定一个固定宽高比（比如16:9）的视口区域，保证屏幕显示区域的中心区域和视口区域的中心点重合。屏幕显示区域的宽高大于等于视口区域的宽高。

这样，不管设备的显示区域如何变化，都能保证，一定能完整显示视口区域。

用户只需要把要显示的内容放到视口区域内，就能保证在不同的显示区域设备上，完整看到要显示的内容。


]]>算法https://hanyeah.cn/blog/post/场景信息保存-视口区域.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=627canvas画游标卡尺刻度null@null.com (hanyeah)https://hanyeah.cn/blog/post/canvas画游标卡尺刻度.htmlMon, 01 Sep 2025 10:51:32 +0800https://hanyeah.cn/blog/post/canvas画游标卡尺刻度.html之前在用h5做物理课件的时候发现，对于非整数的线，h5在渲染上有问题。

flash在课件开发中的优势

游标卡尺，对于刻度的准确性，要求是很严格的，毕竟，游标卡尺就是靠上下两层刻度相差的1/10mm来实现精确测量的。

渲染上的问题，导致直接显示错误了。无法准确的测量。

有一个简单的办法，就是在canvas中用svg图片，创建一个image，image的src用svg图片，然后把image画到canvas上。这样显示效果能保持svg的显示效果。

专业的矢量渲染，会好很多，比如flash，比如svg。

我们想要在canvas中实现一个游标卡尺，缩放的时候，要求保持准确性，有没有什么办法呢？

之前的文章中已经提到过，用canvas自身的方法，似乎是行不通的。

我们可以尝试自己去写渲染算法。

参考：

简要评说Adobe的FlashPlayer的渲染算法

计算几何系列 —— 扫描线算法

图形学中的抗锯齿方法简谈

Computer Graphics from Scratch

可视计算与交互概论

揭秘图像缩小：深度解析算法原理与优化技巧

我们这个问题，属于图像缩小，找图像缩小的算法。

我尝试了3种方法，第一种：最近邻插值：直接取最近的像素值作为新的像素值。
第二种：双线性插值：利用周围两个像素点的加权平均值作为新的像素值。

第三种：原图像的像素点加权平局赋值给目标像素。

效果如下：

在新标签页打开    

代码如下：

<html>
  <head>
    <script>
      var canvas,ctx,input,select;
      var data0 = [];
      var data1 = [];
      for(var i = 0; i < 1800; i++) {
        data0[i] = (i % 10 <= 2) ? 0 : 1;
        data1[i] = (i % 9 <= 2) ? 0 : 1;
      }
      window.onload = function(){
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        input = document.getElementById("input");
        select = document.getElementById("select");
        setData(10, 100, data0);
        setData(10, 110, data1);

        onInput();
      }

      function onChange(e){
        //console.log("change");
      }

      function onInput(e) {
        // console.log("input",input.value);
        ctx.clearRect(0, 200, 1900, 20);

        var w = input.value;
        var m = select.selectedIndex;
        var data2 = suoxiao(data0, w, m);
        var data3 = suoxiao(data1, w, m);
        setData(10, 200, data2);
        setData(10, 210, data3);
      }

      function suoxiao(data, w, m) {
        var n = data.length;
        var s = n / w;
        var a = [];
        for(var i = 0; i < w; i++){
          a[i] = 0;
        }
        if(m == 1) {
          for(var i = 0; i < w; i++) {
            var j = i * s;
            var j0 = Math.floor(j);
            var j1 = Math.ceil(j);
            var v0 = data[j0];
            var v1 = data[j1];
            var f = j - j0;
            a[i] = (v1 * f) + v0 * (1-f);
          }
        } else if(m == 2){
          for(var i = 0; i < n; i++) {
            var j = i / s;
            var v = data[i] / s;
            var j0 = Math.floor(j);
            var j1 = Math.ceil(j);
            var f = j - j0;
            if(j0 >= 0 && j0 < w) a[j0] += v * (1-f);
            if(j1 >= 0 && j1 < w) a[j1] += v * f;
          }
        } else {
          for(var i = 0; i < w; i++) {
            var j = Math.round(i * s);
            a[i] = data[j];
          }
        }
        return a;
      }

      function setData(x, y, data0){
        var w = data0.length;
        var imgData = ctx.getImageData(x, y, w, 10);
        for(var i = 0; i < w; i++) {
          for(var j = 0; j < 10; j++){
            var n = (j * w + i) * 4;
            imgData.data[n] = data0[i] * 255;
            imgData.data[n + 1] = data0[i] * 255;
            imgData.data[n + 2] = data0[i] * 255;
            imgData.data[n + 3] = 255;
          }
        }
        ctx.putImageData(imgData, x, y);
      }
    </script>
  </head>
  <body>
    <select id="select">
      <option value="1">方法一</option>
      <option value="2">方法二</option>
      <option value="3">方法三</option>
    </select>
    <input id="input" type="range" min="1" max="3800" value="1800"  step="1" style="width: 1900px;" onchange="onChange()" oninput="onInput()"/>
    <canvas id="canvas" width="1900" height="1000" style="width: 1900px;height: 1000px;border: solid 1px red;"></canvas>
  </body>
</html>

方法一效果和原生的差不多。

方法二好一点。方法三效果更好。

对于放大的场景，方法三有问题，可以用方法二，或者方法一，或者直接用原生的。

游标卡尺的刻度计算是一维问题，计算量也不是很大。在显示的时候我们取了高度10像素，实际使用的时候，高度1像素就行，拉伸成10像素。


]]>物理虚拟实验https://hanyeah.cn/blog/post/canvas画游标卡尺刻度.html#commenthttps://hanyeah.cn/blog/feed.asp?cmt=626