面向需求GODOT系列1：画出圆角矩形

GODOT版本：4.5

最近写代码，想画5*5的圆角矩形，问了问AI，给的几种方法里，良莠不齐，最后测试了几个简单的方案， 总结一下

方法1：利用pannel来绘制，然后通过StyleBoxFlat来控制pannel成为圆角矩形

extends Control

var cell_size = Vector2(60, 60)
var spacing = 10
var radius = 8

func _ready() -> void:
    create_5x5_grid()

func create_5x5_grid():
    for row in range(5):
        for col in range(5):
            var position = Vector2(col * (cell_size.x + spacing), row * (cell_size.y + spacing))
            
            # 使用 Panel 节点，它会自动填充区域
            var panel = Panel.new()
            panel.position = position
            panel.size = cell_size
            
            # 创建圆角样式
            var style = StyleBoxFlat.new()
            style.bg_color = Color.WHITE
            style.corner_radius_top_left = radius
            style.corner_radius_top_right = radius
            style.corner_radius_bottom_left = radius
            style.corner_radius_bottom_right = radius
            
            # 可选：添加边框
            style.border_width_bottom = 1
            style.border_width_top = 1
            style.border_width_left = 1
            style.border_width_right = 1
            style.border_color = Color.BLACK
            
            panel.add_theme_stylebox_override("panel", style)
            add_child(panel)

方法1，简单干净，易看易修改

方法2：使用预设的画多边形的方法，但需要通过_draw()方法

extends Control

func _draw():
    # 定义网格参数
    var cell_width = 80
    var cell_height = 80
    var spacing = 15
    var radius = 12
    
    # 绘制 5×5 网格
    for i in range(5):
        for j in range(5):
            var x = j * (cell_width + spacing)
            var y = i * (cell_height + spacing)
            
            # 获取圆角矩形点
            var points = get_rounded_points(x, y, cell_width, cell_height, radius)
            
            # 绘制
            draw_polygon(points, [Color.WHITE])  #绘制多边形的预设方法
            draw_polyline(points, Color.BLACK, 1.0, true)  #绘制多边形的边框的预设方法

func get_rounded_points(x: float, y: float, width: float, height: float, radius: float) -> PackedVector2Array:
    var points = PackedVector2Array()
    
    var corners = [
        Vector2(x + radius, y + radius),
        Vector2(x + width - radius, y + radius),
        Vector2(x + width - radius, y + height - radius),
        Vector2(x + radius, y + height - radius)
    ]
    
    for i in range(4):
        var start_angle = deg_to_rad(90 * i + 180)
        for j in range(9):  # 8个线段
            var angle = start_angle + deg_to_rad(90) * j / 8
            points.append(corners[i] + Vector2(cos(angle), sin(angle)) * radius)
    
    return points

方法2：常用方法，可以满足到更复杂的绘制需求

方法3：和方法1类似，不过是使用TextureRect来创建格子（csdn作者：xhei997提供的方法）

var cell_size = Vector2i(80, 80)  # 每个格子大小
var spacing = 15                   # 格子间距
var radius = 12                   # 圆角半径
    

func _ready() -> void:
    create_5x5_grid()

func create_5x5_grid():
    for row in range(5):
        for col in range(5):
            # 为每个格子创建纹理
            var texture = create_rounded_rect2(Color.WHITE, cell_size, radius)
            
            # 创建 TextureRect 显示格子
            var tex_rect = TextureRect.new()
            tex_rect.texture = texture
            tex_rect.position = Vector2(
                col * (cell_size.x + spacing), 
                row * (cell_size.y + spacing)
            )
            add_child(tex_rect)

func create_rounded_rect2(color: Color, size: Vector2i, radius: int) -> ImageTexture:
    var img_width = size.x
    var img_height = size.y
    var img := Image.create(img_width, img_height, false, Image.FORMAT_RGBA8)
    img.fill(Color.TRANSPARENT)
    
    for y in img_height:
        for x in img_width:
            if is_in_rounded_rect(x, y, img_width, img_height, radius):
                img.set_pixel(x, y, color)
 
    return ImageTexture.create_from_image(img)
 
func is_in_rounded_rect(x: int, y: int, w: int, h: int, r: int) -> bool:
    # 中间矩形区域
    if x >= r and x <= w - r and y >= r and y <= h - r:
        return true
    
    # 四角圆形区域检测
    var positions = [
        Vector2(r, r),        # 左上圆心
        Vector2(w - r, r),    # 右上圆心
        Vector2(r, h - r),    # 左下圆心
        Vector2(w - r, h - r) # 右下圆心
    ]
    
    # 检查四角区域
    if x < r and y < r:       # 左上角
        return Vector2(x - r, y - r).length() <= r
    if x > w - r and y < r:  # 右上角
        return Vector2(x - (w - r), y - r).length() <= r
    if x < r and y > h - r:  # 左下角
        return Vector2(x - r, y - (h - r)).length() <= r
    if x > w - r and y > h - r: # 右下角
        return Vector2(x - (w - r), y - (h - r)).length() <= r
    
    # 边缘直线区域
    return true