用PathGradientBrush实现三角形上的颜色梯度

Question

我有一个三角形，其值附加到每个节点(例如，(A,B,C) -> (0.3, 0.1, 0.7))。这些值被映射到具有以下函数的RGB颜色(0.0:蓝色，0.5:绿色，1.0:红色)：

var color =  Color.FromArgb(alpha,
    (int)((value > 0.5 ? 2*value - 1 : 0) * 255),
    (int) ((value > 0.5 ? 2-2*value : 2*value) * 255),
    (int)((value > 0.5 ? 0 : (1 - 2 * value)) * 255)
);

这些值是在三角形上线性插值的(例如，以重心为中心的坐标)，它是整个应用中的一个较大的三角形网格。

对于绘图，我创建了一个GraphicsPath，每个角上都有点，中间有几个点(示例中有12个点，这可能是过分的)。在PathGradientBrush上，我将SurroundColors颜色设置为角的值或这些角之间的线性插值。CenterPoint和CenterValue设置为(A+B+C)/3和values.Sum()/3。对于某些值来说，这看起来很好(在这里是(0.0, 0.5, 1.0)

​

​

但对其他人却不是很好(在这里，(0.3, 0.8, 1.0)，请参阅三角形顶部的工件)：

​

​

我尝试了其他几种策略(例如，按中心点的距离加权值，将中心旋转到其他地方，等等)。但还能拿到那些艺术品。我只需要三角形，但绘图必须发生在油漆处理程序和手动绘画太慢。我怎样才能

• 要么去掉中心颜色，得到一个像OpenGL中那样的彩色三角形
• 或者得到一个不导致这些工件的中心值和/或位置。

代码来重现问题并四处游玩(有点太过将其粘贴到问题中)：http://pastebin.com/gjjzqRvY

Answer 1

我不记得上次我什么时候没有回答我自己的问题。

PathGradientBrush对之间的颜色进行线性插值

• 周围的点->边界上的每一点都有一个颜色
• 边界和中心点上的插值颜色 这很好地处理了以下颜色映射： var color = Color.FromArgb(alpha，(Int)(值* 255)，(Int)(1-值)* 255)，0 )；

例如:如果一个边缘从0到1，则笔刷的插值将计算为30%：

0.3 * colorA + 0.7 * colorB
= 0.3 * (0, 255, 0) + 0.7 * (255,0,0)
= (76, 178)

这正是0.3的共振态函数的结果。对中心的第二次插值也是如此。

但我有3种颜色，但幸运的是，只有一个极端点在0.5。0.0 .. 0.5工作得很好，0.5 .. 1.0工作得很好。但这是线性插值分解。诀窍是给梯度刷这个极值点：

• 拐角处的最小值和最大值不跨越魔术点，只需与中心值保持一致。
• 如果他们交叉，找到他们的边缘和点，他们这样做。总有两个人。笔刷的中心点是它们的平均值，值是极值点。

对未来读者的提示：

• 如果映射不是线性的(平方根、sin/cos、log、.)你运气不好
• 如果你的地图有超过一个极端点，你就不走运了。
• 路径上的3点(不交叉)或5点(交叉)就足够了。将额外的2点设置到过境点。