【Godot4.3】基于绘图函数的矢量蒙版效果与UV换算

概述

在设计圆角容器时突发奇想：

• 将圆角矩形的每个顶点坐标除以对应圆角矩形所在Rect2的size，就得到了顶点对应的UV坐标。
• 然后使用draw_colored_polygon，便可以做到用图片填充圆角矩形的效果。
• 而且这种计算的效果就是图片随着其填充的图像缩放。
• 这就类似于是在CanvasItem的绘图函数基础上实现了矢量蒙版效果

基础原理

• 以上面的五角星为例，它的某个顶点P的UV坐标，应该如下计算：
  $$顶点\text{P}的\text{UV}坐标=\frac{点\text{P}的坐标}{五角星所在轴对齐包围盒\text{Rect2}的\text{size}}$$

• 前提是：五角星Rect2的position为(0,0)

• 这是一种类似自适应的填充形式，图片会随图形的缩放进行缩放，大小和位置始终与图形的包围盒Rect2一致

• 但是在其他情况下，我们或许需要实现一些复杂的填充效果，比如控制图片进行偏移、旋转、缩放等。这时，上面的UV计算方法就不顶用了。

此时，我们需要考虑图片本身和图形两者是独立的，然后考虑通过它们之间偏移关系去映射坐标位置。

测试

编写了一个基础的UI场景进行测试：

# ==========================================================
# UVtest
# 类型：测试
# 概述：实现基于绘图函数的矢量蒙版效果
# 巽星石
# 创建时间：2025年1月3日22:50:10
# 最后修改时间：2025年1月3日23:04:28
# ==========================================================@tool
extends Control@export var texture:Texture2D:set(val):texture = valqueue_redraw()@export var texture_position:=Vector2(): ## 纹理的偏移set(val):texture_position = valqueue_redraw()@export var texture_scale:=Vector2.ONE: ## 纹理缩放值set(val):texture_scale = valqueue_redraw()@export_range(-360,360,1) var texture_rotation_degree:=0: ## 纹理旋转set(val):texture_rotation_degree = valqueue_redraw()@export var fill_color:=Color.WHITE:set(val):fill_color = valqueue_redraw()func _draw() -> void:var rect = get_rect() * get_transform()var pots = star(0,5,rect.size.y/2.0,rect.size.y/3.0,rect.get_center())# 绘制背景if texture:var rot = deg_to_rad(texture_rotation_degree)var image_rect = Rect2(texture_position,texture.get_size() * texture_scale)var r:Vector2 = rect.size/image_rect.size  # 比例var uvs:PackedVector2Arrayfor pot in pots: # 计算UV坐标# 进行旋转变换后的坐标var p = (pot - rect.get_center()).rotated(-rot) + rect.get_center()uvs.append(((p - texture_position)/rect.size) * r)# 绘制圆角矩形draw_colored_polygon(pots,fill_color,uvs,texture)else:draw_polygon(pots,[fill_color])pass# 星形
func star(start_angle:int,edges:int,r:float,r2:float = 0,offset:Vector2 = Vector2.ZERO):if r2 == 0:r2 = r/2.0var points:PackedVector2Array# 外部半径var vec  = Vector2.RIGHT.rotated(deg_to_rad(start_angle)) * r# 内部半径var vec2  = Vector2.RIGHT.rotated(deg_to_rad(start_angle + 180/edges)) * r2for i in range(edges):points.append(vec.rotated(2 * PI/edges * i) + offset)points.append(vec2.rotated(2 * PI/edges * i) + offset)return points

效果：

进行偏移、旋转和缩放后的效果：

提示

本例中暂时没有使用几何图形自身的Rect2，而是采用了测试场景控件元素的Rect2，所以带来的实际效果可能不太相同。

也就是说这还是一个未完成的实验版本。后续敬请期待。