为何控制点的Canvas显示变换与逆变换无法正常工作？

你当前的代码无法正常工作，核心问题出在两个方面：

1. 未适配Canvas与3D引擎的坐标系差异 #

Canvas的坐标系原点在左上角，y轴向下递增；而Three.js这类3D引擎的坐标系通常是y轴向上递增。你只做了100倍的数值缩放，没有修正y轴方向，会导致控制点在Canvas上的显示位置上下颠倒，看起来像是“位置完全错误”。

另外，你的Canvas尺寸是400px宽、200px高，但当前转换用统一的100倍缩放，会导致原始x范围0_{1转换后仅占Canvas宽度的1/4，y范围0}1转换后仅占高度的1/2，点的显示区域和预期的画布适配完全不符。

2. 逆变换的精度处理存在隐患 #

toFixed(10)会先把数值转为字符串再转回数字，这种转换看似在保留精度，但JavaScript浮点数运算中，可能引入意外的舍入误差。比如某些数值经过toFixed处理后，转回数字会出现不必要的小数位或精度丢失，影响写回引擎的原始数据准确性。

修正后的代码示例 #

显示转换函数（适配Canvas坐标系） #

const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 200;
// 若要让原始0~1的范围铺满Canvas，x用400倍、y用200倍缩放，而非统一100倍
const SCALE_X = 400;
const SCALE_Y = 200;

const transformControlPointsForDisplay = (controlPoints: THREE.Vector3[]) => 
  controlPoints.map(cp => new THREE.Vector3(
    cp.x * SCALE_X, // x轴方向一致，按画布宽度缩放
    CANVAS_HEIGHT - (cp.y * SCALE_Y), // 反转y轴适配Canvas坐标系
    0 // 原始z为0，无需处理
));

逆变换函数（还原引擎坐标） #

const reverseTransformControlPoints = (controlPoints: THREE.Vector3[]) => 
  controlPoints.map(cp => new THREE.Vector3(
    cp.x / SCALE_X, // 直接缩放还原x坐标
    (CANVAS_HEIGHT - cp.y) / SCALE_Y, // 反转y轴后还原引擎坐标
    0 // 保持z轴为0
));

额外说明 #

• 如果你的需求不是让原始点铺满画布，而是仅做100倍缩放，那只需把SCALE_X和SCALE_Y都设为100，但仍需保留y轴反转的逻辑，否则显示位置依然颠倒。
• 若确实需要控制精度，建议用Math.round(cp.x / SCALE_X * 1e10) / 1e10这种方式，避免字符串转换带来的额外开销和潜在问题。

内容的提问来源于stack exchange，提问作者Zoltán Orosz