Godot:CanvasItem

lastmod 2023-04-25created 2022-05-1910 edits

Base class of anything 2D.

GDScript Methods

void	`_draw ( ) virtual`
void	`draw_arc ( Vector2 center, float radius, float start_angle, float end_angle, int point_count, Color color, float width=1.0, bool antialiased=false )`
float	`draw_char ( Font font, Vector2 position, String char, String next, Color modulate=Color( 1, 1, 1, 1 ) )`
void	`draw_circle ( Vector2 position, float radius, Color color )`
void	`draw_colored_polygon ( PoolVector2Array points, Color color, PoolVector2Array uvs=PoolVector2Array( ), Texture texture=null, Texture normal_map=null, bool antialiased=false )`
void	`draw_line ( Vector2 from, Vector2 to, Color color, float width=1.0, bool antialiased=false )`
void	`draw_mesh ( Mesh mesh, Texture texture, Texture normal_map=null, Transform2D transform=Transform2D( 1, 0, 0, 1, 0, 0 ), Color modulate=Color( 1, 1, 1, 1 ) )`
void	`draw_multiline ( PoolVector2Array points, Color color, float width=1.0, bool antialiased=false )`
void	`draw_multiline_colors ( PoolVector2Array points, PoolColorArray colors, float width=1.0, bool antialiased=false )`
void	`draw_multimesh ( MultiMesh multimesh, Texture texture, Texture normal_map=null )`
void	`draw_polygon ( PoolVector2Array points, PoolColorArray colors, PoolVector2Array uvs=PoolVector2Array( ), Texture texture=null, Texture normal_map=null, bool antialiased=false )`
void	`draw_polyline ( PoolVector2Array points, Color color, float width=1.0, bool antialiased=false )`
void	`draw_polyline_colors ( PoolVector2Array points, PoolColorArray colors, float width=1.0, bool antialiased=false )`
void	`draw_primitive ( PoolVector2Array points, PoolColorArray colors, PoolVector2Array uvs, Texture texture=null, float width=1.0, Texture normal_map=null )`
void	`draw_rect ( Rect2 rect, Color color, bool filled=true, float width=1.0, bool antialiased=false )`
void	`draw_set_transform ( Vector2 position, float rotation, Vector2 scale )`
void	`draw_set_transform_matrix ( Transform2D xform )`
void	`draw_string ( Font font, Vector2 position, String text, Color modulate=Color( 1, 1, 1, 1 ), int clip_w=-1 )`
void	`draw_style_box ( StyleBox style_box, Rect2 rect )`
void	`draw_texture ( Texture texture, Vector2 position, Color modulate=Color( 1, 1, 1, 1 ), Texture normal_map=null )`
void	`draw_texture_rect ( Texture texture, Rect2 rect, bool tile, Color modulate=Color( 1, 1, 1, 1 ), bool transpose=false, Texture normal_map=null )`
void	`draw_texture_rect_region ( Texture texture, Rect2 rect, Rect2 src_rect, Color modulate=Color( 1, 1, 1, 1 ), bool transpose=false, Texture normal_map=null, bool clip_uv=true )`
void	`force_update_transform ( )`
RID	`get_canvas ( ) const`
RID	`get_canvas_item ( ) const`
Transform2D	`get_canvas_transform ( ) const`
Vector2	`get_global_mouse_position ( ) const`
Transform2D	`get_global_transform ( ) const`
Transform2D	`get_global_transform_with_canvas ( ) const`
Vector2	`get_local_mouse_position ( ) const`
Transform2D	`get_transform ( ) const`
Rect2	`get_viewport_rect ( ) const`
Transform2D	`get_viewport_transform ( ) const`
World2D	`get_world_2d ( ) const`
void	`hide ( )`
bool	`is_local_transform_notification_enabled ( ) const`
bool	`is_set_as_toplevel ( ) const`
bool	`is_transform_notification_enabled ( ) const`
bool	`is_visible_in_tree ( ) const`
Vector2	`make_canvas_position_local ( Vector2 screen_point ) const`
InputEvent	`make_input_local ( InputEvent event ) const`
void	`set_as_toplevel ( bool enable )`
void	`set_notify_local_transform ( bool enable )`
void	`set_notify_transform ( bool enable )`
void	`show ( )`
void	`update ( )`

draw_string

How to calculate the area of the text to be drawn

Use the Godot:Font#get_string_size function.

draw_polyline

WARNING
Due to how it works, built-in antialiasing will not look correct for translucent polygons and may not work on certain platforms. As a workaround, install the Antialiased Line2D add-on, then create an AntialiasedPolygon2D node. That node relies on a texture with custom mipmaps to perform antialiasing.

Line Connection issue

According to the documentation the lines are connected, but they aren't... which causes a Line Connection issue.

A hexagon is drawn as follows.

float COS30 = (float)Math.Sqrt(3f) / 2f;
float SIN30 = 0.5f;
var r = radius;
var x = COS30 * radius;
var y = SIN30 * radius;
var cx = center.x;
var cy = center.y;
var points = new List<Vector2>();
points.Add(new Vector2(cx + 0, cy - r));  // 12시
points.Add(new Vector2(cx + x, cy - y));  // 1시30분
points.Add(new Vector2(cx + x, cy + y));  // 4시30분
points.Add(new Vector2(cx + 0, cy + r));  // 6시
points.Add(new Vector2(cx - x, cy + y));  // 7시30분
points.Add(new Vector2(cx - x, cy - y));  // 10시30분
points.Add(new Vector2(cx + 0, cy - r));  // 12시

If the line width is greater than 1, the connected lines look unnatural, as in the following image. (You can see a notch where the lines meet at the 12 o'clock vertex.)

Godot_draw_polyline_lineWidth_issue_01.png

So if you add an extra line from the 12 o'clock vertex on to the 1:30 vertex,

points.Add(new Vector2(cx + 0, cy - r));  // 12시
points.Add(new Vector2(cx + x, cy - y));  // 1시30분
points.Add(new Vector2(cx + x, cy + y));  // 4시30분
points.Add(new Vector2(cx + 0, cy + r));  // 6시
points.Add(new Vector2(cx - x, cy + y));  // 7시30분
points.Add(new Vector2(cx - x, cy - y));  // 10시30분
points.Add(new Vector2(cx + 0, cy - r));  // 12시
points.Add(new Vector2(cx + x, cy - y));  // 1시30분

it looks like this:

Godot_draw_polyline_lineWidth_issue_02.png

At a glance it seems to be drawn well, but if you zoom in you can see something odd.

Godot_draw_polyline_lineWidth_issue_03.png

The same thing happens even if you start drawing from the 1:30 vertex.

points.Add(new Vector2(cx + x, cy - y));  // 1시30분
points.Add(new Vector2(cx + x, cy + y));  // 4시30분
points.Add(new Vector2(cx + 0, cy + r));  // 6시
points.Add(new Vector2(cx - x, cy + y));  // 7시30분
points.Add(new Vector2(cx - x, cy - y));  // 10시30분
points.Add(new Vector2(cx + 0, cy - r));  // 12시
points.Add(new Vector2(cx + x, cy - y));  // 1시30분

Godot_draw_polyline_lineWidth_issue_04.png

This seems to be an issue caused by representing line widths greater than 1 as connected "rectangle shapes".

Godot_draw_polyline_lineWidth_issue_06.png

So draw it by adding a point on a straight segment where the width does not change, i.e. at the 3 o'clock position:

Godot_draw_polyline_lineWidth_issue_05.png

var points = new List<Vector2>();
// points.Add(new Vector2(cx + 0, cy - r));  // 12시
// points.Add(new Vector2(cx + x, cy - y));  // 1시30분
points.Add(new Vector2(cx + x, cy)); // 3시
points.Add(new Vector2(cx + x, cy + y));  // 4시30분
points.Add(new Vector2(cx + 0, cy + r));  // 6시
points.Add(new Vector2(cx - x, cy + y));  // 7시30분
points.Add(new Vector2(cx - x, cy - y));  // 10시30분
points.Add(new Vector2(cx + 0, cy - r));  // 12시
points.Add(new Vector2(cx + x, cy - y));  // 1시30분
points.Add(new Vector2(cx + x, cy)); // 3시

Favorite site

CanvasItem — Godot Engine (stable) documentation (Korean)

author Zer0 sitemap