开罗 - 重叠线 - "deadzone" 没有平局

Question

我在开罗有多条线路。我想在线周围有一个 "deadzone"，所以如果我渲染多条重叠线，它们不会重叠。

下图中有些线条。

Answer 1

下面是一个示例程序，它首先以白色和较大的线宽绘制后面的线条，然后再次以实际线宽的黑色绘制：

#include <cairo.h>

int main()
{
    cairo_surface_t *s = cairo_image_surface_create(CAIRO_FORMAT_RGB24, 200, 200);
    cairo_t *cr = cairo_create(s);

    cairo_set_source_rgb(cr, 1, 1, 1);
    cairo_paint(cr);

    cairo_move_to(cr, 50, 20);
    cairo_line_to(cr, 110, 160);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 200, 0);
    cairo_line_to(cr, 60, 160);

    cairo_set_line_width(cr, 15);
    cairo_set_source_rgb(cr, 1, 1, 1);
    cairo_stroke_preserve(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 10, 100);
    cairo_line_to(cr, 220, 50);

    cairo_set_line_width(cr, 15);
    cairo_set_source_rgb(cr, 1, 1, 1);
    cairo_stroke_preserve(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);

    cairo_surface_write_to_png(s, "out.png");

    cairo_destroy(cr);
    cairo_surface_destroy(s);
}

输出：

好了，现在进入后台。选项 1 是绘制具有透明背景的线条，然后通过运算符 DEST_OVER:

在其下方绘制背景

#include <cairo.h>

int main()
{
    /* I changed this to ARGB32 */
    cairo_surface_t *s = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 200, 200);
    cairo_t *cr = cairo_create(s);
    cairo_pattern_t *p = cairo_pattern_create_linear(0, 0, 200, 200);

    /* Draw the lines */

    cairo_move_to(cr, 50, 20);
    cairo_line_to(cr, 110, 160);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 200, 0);
    cairo_line_to(cr, 60, 160);

    cairo_set_line_width(cr, 15);
    /* I changed all "drawing white" to "drawing transparency" */
    cairo_save(cr);
    cairo_set_source_rgba(cr, 0, 0, 0, 0);
    cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
    cairo_stroke_preserve(cr);
    cairo_restore(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 10, 100);
    cairo_line_to(cr, 220, 50);

    cairo_set_line_width(cr, 15);
    cairo_save(cr);
    cairo_set_source_rgba(cr, 0, 0, 0, 0);
    cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
    cairo_stroke_preserve(cr);
    cairo_restore(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);

    /* Draw a background below what we drew so far */
    cairo_pattern_add_color_stop_rgb(p, 0, 1, 0, 0);
    cairo_pattern_add_color_stop_rgb(p, 1, 0, 0, 1);
    cairo_set_source(cr, p);
    /* Actually, I mean DEST_OVER instead of ATOP (which I wrote in my comment) */
    cairo_set_operator(cr, CAIRO_OPERATOR_DEST_OVER);
    cairo_paint(cr);

    cairo_surface_write_to_png(s, "out.png");

    cairo_pattern_destroy(p);
    cairo_destroy(cr);
    cairo_surface_destroy(s);
}

输出：

选项 2 是使用临时表面。线条是用透明背景绘制的。然后，将其绘制在现有背景之上：

#include <cairo.h>

int main()
{
    cairo_surface_t *s = cairo_image_surface_create(CAIRO_FORMAT_RGB24, 200, 200);
    cairo_t *cr = cairo_create(s);
    cairo_pattern_t *p = cairo_pattern_create_linear(0, 0, 200, 200);

    /* Draw a background */
    cairo_pattern_add_color_stop_rgb(p, 0, 1, 0, 0);
    cairo_pattern_add_color_stop_rgb(p, 1, 0, 0, 1);
    cairo_set_source(cr, p);
    cairo_paint(cr);
    cairo_pattern_destroy(p);

    /* Draw the lines */

    /* but draw them to a temporary surface */
    cairo_push_group_with_content(cr, CAIRO_CONTENT_COLOR_ALPHA);

    cairo_move_to(cr, 50, 20);
    cairo_line_to(cr, 110, 160);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 200, 0);
    cairo_line_to(cr, 60, 160);

    cairo_set_line_width(cr, 15);
    /* I changed all "drawing white" to "drawing transparency" */
    cairo_save(cr);
    cairo_set_source_rgba(cr, 0, 0, 0, 0);
    cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
    cairo_stroke_preserve(cr);
    cairo_restore(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);


    cairo_move_to(cr, 10, 100);
    cairo_line_to(cr, 220, 50);

    cairo_set_line_width(cr, 15);
    cairo_save(cr);
    cairo_set_source_rgba(cr, 0, 0, 0, 0);
    cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
    cairo_stroke_preserve(cr);
    cairo_restore(cr);

    cairo_set_line_width(cr, 4);
    cairo_set_source_rgb(cr, 0, 0, 0);
    cairo_stroke(cr);

    /* Now draw the temporary surface to the target surface */
    cairo_pop_group_to_source(cr);
    cairo_paint(cr);

    cairo_surface_write_to_png(s, "out.png");

    cairo_destroy(cr);
    cairo_surface_destroy(s);
}

输出：

开罗 - 重叠线 - "deadzone" 没有平局

Cairo - overlapping lines - "deadzone" with no draw

cairo