今日目標：繪製自定義圖形

▍事前準備

在昨天我們成功實現了螢幕觸控偵測，不過從昨天的畫面中我們可以感受到其實在移動時沒有輔助顯示的話，會不知道起始點擊位置在哪要移動時要往哪，所以今天目標就是使用程式碼增加簡易的輔助顯示圖示。

• 介紹 _draw()

  void _draw() virtual

  Called when CanvasItem has been requested to redraw (after queue_redraw() is called, either manually or by the engine).

    這個方法會在 `queue_redraw()` 方法呼叫時執行一次，如果想要有動態效果需要持續手動呼叫前述方法才會更新狀態。
  

• 介紹 draw_arc

  void draw_arc(center: Vector2, radius: float, start_angle: float, end_angle: float, point_count: int, color: Color, width: float = -1.0, antialiased: bool = false)

  Draws an unfilled arc between the given angles with a uniform color and width and optional antialiasing (supported only for positive width). The larger the value of point_count, the smoother the curve.

    這個方法根據輸入參數指定位置、半徑、起始弧度、結束弧度、及多少點等參數繪製弧線。
  

• 介紹 draw_circle

  void draw_circle(position: Vector2, radius: float, color: Color)

  Draws a colored, filled circle.

    這個方法根據輸入參數指定位置、半徑、顏色參數繪製圓。
  

▍出發

• 首先我們新增一個場景，並建立 Node2D 節點作為根節點，先儲存到 Scenes 資料夾中。
  因為 _draw() 是 CanvasItem 的方法，所以我們要建立繼承此類別的節點，這次使用 Node2D。

• 在節點上附加腳本，編輯腳本：

  1. 先將前面介紹中需要的參數暴露出來方便做修改並加上初始值。

  @export var center: Vector2 = Vector2.ZERO
  @export var radius: float = 100.0
  @export var start_angle: float = 0
  @export var end_angle: float = 2*PI
  @export var point_count: int = 32
  @export var color: Color = Color.AQUA
  @export var width: float = 20
  

  2. 編輯 _draw() 方法使用 draw_arc 並套用上一步宣告的變數作為參數：

  func _draw():
      draw_arc(center, radius, start_angle, end_angle, point_count, color, width)
  

  3. 為了待會調整方便在 _process 方法中持續呼叫 queue_redraw() 持續更新狀態。

  func _process(delta):
      queue_redraw() # 調整完後可以刪除。
  

• 現在播放場景並調整參數值到想要的數值，調整完成後將剛剛第三點的 queue_redraw() 刪除，因為我們之後並不會需要動態調整他。
  

• 完成後現在在 _draw() 再多畫一個圓作為我們移動方向的提示，根據參數調整位置設定在剛剛圓環上的正上方。

      # 距離環中心半徑距離上方作為圓心繪製 1/3 半徑實心圓。
      draw_circle(center - Vector2(0, radius), radius/3, Color.HONEYDEW)
  

▍執行

完成後如下圖：

▍完成

完整檔案

extends Node2D

@export var center: Vector2 = Vector2.ZERO
@export var radius: float = 100.0
@export var start_angle: float = 0
@export var end_angle: float = 2*PI
@export var point_count: int = 32
@export var color: Color = Color.AQUA
@export var width: float = 20
# Called when the node enters the scene tree for the first time.
func _ready():
	pass # Replace with function body.

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
	pass

func _draw():
	draw_circle(center - Vector2(0, radius), radius/3, Color.HONEYDEW)
	draw_arc(center, radius, start_angle, end_angle, point_count, color, width)

：）