如何计算四色线性渐变中任意点E的颜色？

核心思路 #

优先采用线性加权混合的简化方案，兼顾实现速度与自然过渡效果——由于是直线上的点，距离权重完全可以替代角度影响，无需复杂的角度计算。

步骤分解 #

1. 坐标归一化

   • 将直线上A、B、C、D四点的位置转换为一维坐标：以A点为原点（坐标值0），D点为最大值L，计算出B、C对应的坐标值x_B、x_C。
   • 计算点E在直线上的投影坐标x_E：若E在A左侧，x_E=0；若在D右侧，x_E=L。

2. 距离权重计算

   • 分别计算E到四个点的绝对距离：d_A = |x_E - x_A|、d_B = |x_E - x_B|、d_C = |x_E - x_C|、d_D = |x_E - x_D|。
   • 采用倒数权重（加极小值ε避免除以0，比如ε=0.001）让近点的影响更强：

     w_A = 1/(d_A + ε)
     w_B = 1/(d_B + ε)
     w_C = 1/(d_C + ε)
     w_D = 1/(d_D + ε)
     

   • 归一化权重，确保权重总和为1：

     total_w = w_A + w_B + w_C + w_D
     w_A = w_A / total_w
     w_B = w_B / total_w
     w_C = w_C / total_w
     w_D = w_D / total_w
     

3. 颜色混合计算

   • 假设颜色用RGB三通道表示（如A=(R_A, G_A, B_A)），E点颜色按权重加权求和：

     R_E = w_A*R_A + w_B*R_B + w_C*R_C + w_D*R_D
     G_E = w_A*G_A + w_B*G_B + w_C*G_C + w_D*G_D
     B_E = w_A*B_A + w_B*B_B + w_C*B_C + w_D*B_D
     

   • 最后将RGB值限制在对应颜色格式的有效范围（如0-255或0-1）。

边界处理 #

• E在A左侧：直接返回颜色A
• E在D右侧：直接返回颜色D

更快速的简化优化 #

如果追求极致实现速度，可改用分段线性渐变：

• 将直线分为A-B、B-C、C-D三段
• E在A-B段：仅混合A、B颜色，权重按E到A、B的距离比例计算
• E在B-C段：仅混合B、C颜色
• E在C-D段：仅混合C、D颜色
  这种方式计算量极小，过渡效果也能满足需求。

内容的提问来源于stack exchange，提问作者Dines