plutovg
plutovg copied to clipboard
sammycage
miss fillRect ?
<!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>
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?
<!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>
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:
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);
}
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!
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！
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)
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)
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.