Giters

sammycage / plutovg

Tiny 2D vector graphics library in C

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

miss fillRect ?

scriptiot-dev opened this issue · comments

commented 
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
ctx.fillStyle = "#00FF00";
ctx.fillRect(50,50,150,75);
ctx.fillStyle = "#0000FF";
ctx.fillRect(100,100,150,75);
</script>

</body>
</html>

image

how to do this by plutvg api？thanks!!!

you can try the code above in this website:

https://www.quanzhanketang.com/canvas/trycanvas_draw.html?filename=trycanvas_draw

void plutovg_fillRect(plutovg_t* ctx, double x, double y, double w, double h){
    plutovg_save(ctx);
    plutovg_rect(ctx, x, y, w, h);
    plutovg_fill(ctx);
    plutovg_restore(ctx);
}

static void test_fillRect(const char * filename)
{
    plutovg_surface_t * surface = plutovg_surface_create(256, 256);
    plutovg_t * ctx = plutovg_create(surface);


    plutovg_set_source_rgb(ctx, 1, 0, 0);
    plutovg_fillRect(ctx, 0, 0, 250, 100);

    plutovg_set_source_rgb(ctx, 0, 1, 0);
    plutovg_fillRect(ctx, 50, 50, 250, 100);

    plutovg_set_source_rgb(ctx, 0, 0, 1);
    plutovg_fillRect(ctx, 100, 100, 250, 100);

    plutovg_surface_write_to_png(surface, filename);
    plutovg_destroy(ctx);
    plutovg_surface_destroy(surface);
}

The fillRect above is right?

commented 
<!DOCTYPE html>
<html>
<body>

<p>no clip()：</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Draw a rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
// Draw red rectangle
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script> 

<br />

<p> clip()：</p>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script> 

</body>
</html>

image

you can try the code above in this website:

https://www.quanzhanketang.com/canvas/trycanvas_draw.html?filename=trycanvas_draw

static void test_clip2(const char * filename)
{
    plutovg_surface_t * surface = plutovg_surface_create(256, 256);
    plutovg_t * ctx = plutovg_create(surface);

    plutovg_rect(ctx, 50, 20, 200, 120);
    plutovg_stroke(ctx);
    plutovg_clip(ctx);

    plutovg_set_source_rgb(ctx, 0, 1, 0);
    plutovg_rect(ctx, 0, 0, 250, 100);
    plutovg_fill(ctx);

    plutovg_surface_write_to_png(surface, filename);
    plutovg_destroy(ctx);
    plutovg_surface_destroy(surface);
}

but the result is:

clip2

commented

Use plutovg_stroke_preserve instead of plutovg_stroke because plutovg_stroke clears the subpath leaving plutovg_clip with empty path

static void test_clip2(const char * filename)
{
    plutovg_surface_t * surface = plutovg_surface_create(256, 256);
    plutovg_t * ctx = plutovg_create(surface);

    plutovg_rect(ctx, 50, 20, 200, 120);
    plutovg_stroke_preserve(ctx); // 
    plutovg_clip(ctx);

    plutovg_set_source_rgb(ctx, 0, 1, 0);
    plutovg_rect(ctx, 0, 0, 250, 100);
    plutovg_fill(ctx);

    plutovg_surface_write_to_png(surface, filename);
    plutovg_destroy(ctx);
    plutovg_surface_destroy(surface);
}
commented

yeah, it works ! but the api is a litter diffrent from html canvas api, when I translate a html canvas code to plutvg api , somtimes use stroke, somes use stroke_preserve, it made me confused.

// Draw a rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();

plutovg_rect(ctx, 50, 20, 200, 120);
plutovg_stroke_preserve(ctx); // 
plutovg_clip(ctx);

thanks!

commented

Add fillRect and strokeRect api can make plutovg more complete, plutovg will be more cool ! I have test plutovg vs html canvas , we will make a tool to tanslate html canvas code to plutovg, so we will have a lot resultful examples！

commented

but the api is a litter diffrent from html canvas api.

They are different

when I translate a html canvas code to plutvg api , somtimes use stroke, somes use stroke_preserve, it made me confused.

// ctx.rect(0, 0, 24, 24)
plutovg_new_path(pluto);
plutovg_rect(pluto, 0, 0, 24, 24);

// ctx.fillRect(0, 0, 24, 24)
plutovg_new_path(pluto);
plutovg_rect(pluto, 0, 0, 24, 24);
plutovg_fill(pluto);

// ctx.strokeRect(0, 0, 24, 24)
plutovg_new_path(pluto);
plutovg_rect(pluto, 0, 0, 24, 24);
plutovg_stroke(pluto);

// ctx.clearRect(0, 0, 24, 24)
plutovg_new_path(pluto);
plutovg_rect(pluto, 0, 0, 24, 24);
plutovg_paint(pluto);

// ctx.clip()
plutovg_clip_preserve(pluto)

// ctx.fill()
plutovg_fill_preserve(pluto)

// ctx.stroke()
plutovg_stroke_preserve(pluto)
commented

plutovg_fill is equivalent to

plutovg_fill_preserve(pluto)
plutovg_new_path(pluto)

plutovg_stroke is equivalent to

plutovg_stroke_preserve(pluto)
plutovg_new_path(pluto)

plutovg_clip is equivalent to

plutovg_clip_preserve(pluto)
plutovg_new_path(pluto)
commented

Add fillRect and strokeRect api can make plutovg more complete, plutovg will be more cool !

No... You can easily write it yourself when you need.

we will make a tool to tanslate html canvas code to plutovg, so we will have a lot resultful examples！

Before you dive into this wonderful project, you should use c++ to wrap plutovg in HTML canvas, to make things easier.