如何为基于Bresenham算法的抗锯齿二次Bézier曲线实现线宽效果

之前尝试失败的原因 #

• 直接替换最后一行plotLineAA为plotLineWidth无效：原函数中绝大多数曲线像素是在do-while循环内通过setPixelAA直接绘制的，最后一行仅负责处理曲线末端残留的极短直线段，仅修改该行完全不影响曲线主体的绘制宽度。
• 偏移控制点递归绘制的方案异常：你使用的xx/yy是轴对齐的步进方向，不是曲线的法线方向，偏移后的曲线和原曲线不平行，且多次绘制时alpha值直接叠加没有做阈值限制，导致抗锯齿颜色过深、失真。

最优实现方案（最小改动适配原有Bresenham框架） #

核心思路：原算法的ed变量已经预计算了像素到理想曲线的距离对应的抗锯齿归一化系数，我们不需要改动曲线步进逻辑，只需要在每次调用setPixelAA时，沿着曲线法线方向绘制线宽对应的多个像素，重新计算每个偏移像素的抗锯齿alpha值即可。

修改后的代码如下：

void plotQuadBezierSegAAWidth(int x0, int y0, int x1, int y1, int x2, int y2, int wd)
{  
   int sx = x2-x1, sy = y2-y1;
   long xx = x0-x1, yy = y0-y1, xy;
   double dx, dy, err, ed, cur = xx*sy-yy*sx;
   int halfWd = wd / 2; // 线宽一半，向法线两侧偏移
   int stepSign = wd % 2 == 0 ? 0 : 1; // 奇数线宽中心对齐修正

   assert(xx*sx >= 0 && yy*sy >= 0);

   if (sx*(long)sx+sy*(long)sy > xx*xx+yy*yy) {
      x2 = x0; x0 = sx+x1; y2 = y0; y0 = sy+y1; cur = -cur;
   }  
   if (cur != 0)
   {
      xx += sx; xx *= sx = x0 < x2 ? 1 : -1;
      yy += sy; yy *= sy = y0 < y2 ? 1 : -1;
      xy = 2*xx*yy; xx *= xx; yy *= yy;
      if (cur*sx*sy < 0) {
         xx = -xx; yy = -yy; xy = -xy; cur = -cur;
      }
      dx = 4.0*sy*(x1-x0)*cur+xx-xy;
      dy = 4.0*sx*(y0-y1)*cur+yy-xy;
      xx += xx; yy += yy; err = dx+dy+xy;
      do {                              
         cur = fmin(dx+xy,-xy-dy);
         ed = fmax(dx+xy,-xy-dy);
         ed = 255/(ed+2*ed*cur*cur/(4.*ed*ed+cur*cur)); 
         // 改动点：沿法线方向绘制线宽对应的所有像素
         double baseDist = fabs(err-dx-dy-xy);
         for(int i = -halfWd; i <= halfWd + stepSign -1; i++){
             int offX = i * (-sy) / (abs(sx) + abs(sy) + 1);
             int offY = i * sx / (abs(sx) + abs(sy) + 1);
             double offsetDist = baseDist + i * ed / 255.0;
             if(offsetDist < 1.0){
                 setPixelAA(x0 + offX, y0 + offY, 255 - offsetDist * 255);
             }
         }
         if (x0 == x2 && y0 == y2) {
             // 最后一段线替换为带宽度绘制
             plotLineWidth(x0,y0, x2,y2, wd);
             return;
         }
         x1 = x0; cur = dx-err; y1 = 2*err+dy < 0;
         if (2*err+dx > 0) {
            if (err-dy < ed) {
                double sideDist = fabs(err-dy);
                for(int i = -halfWd; i <= halfWd + stepSign -1; i++){
                    int offX = i * (-sy) / (abs(sx) + abs(sy) + 1);
                    int offY = i * sx / (abs(sx) + abs(sy) + 1);
                    double offsetDist = sideDist + i * ed / 255.0;
                    if(offsetDist < 1.0){
                        setPixelAA(x0 + offX, y0+sy + offY, 255 - offsetDist * 255);
                    }
                }
            }
            x0 += sx; dx -= xy; err += dy += yy;
         }
         if (y1) {
            if (cur < ed) {
                double sideDist = fabs(cur);
                for(int i = -halfWd; i <= halfWd + stepSign -1; i++){
                    int offX = i * (-sy) / (abs(sx) + abs(sy) + 1);
                    int offY = i * sx / (abs(sx) + abs(sy) + 1);
                    double offsetDist = sideDist + i * ed / 255.0;
                    if(offsetDist < 1.0){
                        setPixelAA(x1+sx + offX, y0 + offY, 255 - offsetDist * 255);
                    }
                }
            }
            y0 += sy; dy -= xy; err += dx += xx; 
         }
      } while (dy < dx);
   }
   // 末端直线替换为带宽度绘制
   plotLineWidth(x0,y0, x2,y2, wd);
}

注意事项 #

• 如果要使用偏移控制点的方案，需要将三个控制点统一沿着曲线段的法线方向偏移，不能用轴对齐的xx/yy偏移，同时绘制时要对alpha值做min(255, alpha)的阈值限制，避免颜色溢出。
• 线宽大于3px时可以适当提高抗锯齿采样精度，避免边缘出现锯齿。

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