Cairo绘制宽描边圆形路径出现空心问题的解决方法咨询

问题表现：绘制带有宽描边的圆形路径时，圆形中间出现了不符合预期的空心区域（图示为一个外围有宽描边、内部空心的圆形）。

问题原因 #

Cairo的描边是沿路径居中绘制的，描边宽度会均匀分配在路径的内外两侧。当仅对圆形路径执行cairo_stroke()操作时，如果线宽小于圆形直径，就会形成中间空心的圆环；若你的预期是实心图形，就会出现不符合预期的结果。

解决方法 #

• 直接绘制实心圆：如果需求是实心圆形，无需使用描边，直接用填充操作替代：

  cairo_arc(cr, x, y, radius, 0, 2 * M_PI);
  cairo_set_source_rgb(cr, 0, 0, 0); // 设置填充颜色
  cairo_fill(cr);
  

• 填充+描边组合实现带边框的实心圆：如果需要实心圆外加宽描边，先填充路径再绘制描边：

  cairo_arc(cr, x, y, radius, 0, 2 * M_PI);
  cairo_set_source_rgb(cr, 0, 0, 0); // 内部填充色
  cairo_fill(cr);
  cairo_set_line_width(cr, stroke_width); // 设置描边宽度
  cairo_set_source_rgb(cr, 1, 0, 0); // 描边颜色
  cairo_stroke(cr);
  

• 调整路径半径适配描边实现实心效果：如果必须通过描边实现实心圆，将圆形路径的半径设为描边宽度的一半，这样描边会完全覆盖路径区域：

  double stroke_width = 40.0;
  cairo_arc(cr, x, y, stroke_width / 2, 0, 2 * M_PI);
  cairo_set_line_width(cr, stroke_width);
  cairo_set_source_rgb(cr, 0, 0, 0);
  cairo_stroke(cr);
  

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