【Godot4.2】CanvasItem绘图函数全解析 - 8.绘制点索引

概述

在示意图绘制过程中或者测试过程中，可能需要标记点的索引。

最常见的形式就是用一个圆圈作为背景，用阿拉伯数字作为索引。
在这里插入图片描述

实现的重点是动态计算背景圆的半径。原理是，获取字符串的矩形，取对角线长度的一半作为外接圆的半径。

系列目录

  • 0.概述
  • 1.绘制简单图形
  • 2.设定绘图变换
  • 3.绘制纹理
  • 4.绘制样式盒
  • 5.绘制字符和字符串
  • 6.TextLine和TextParagraph详解
  • 7.自定义节点TextBoard
  • 8.绘制点索引
  • 9.绘制表格

绘图函数实现

# 绘制带有编号的圆，用于标记几何图形顶点
func draw_point_idx(canvas:RID,pos:Vector2,index:int,bg_color:=Color.YELLOW,color:=Color.BLACK,font_size:=16,font:Font = ThemeDB.fallback_font):
	# 构造TextLine
	var text = TextLine.new()
	text.add_string(str(index),font,font_size) # 按设置的字体和字号添加编号
	
	var offset_pos = pos - text.get_size()/2.0  # 文本矩形中心对齐到pos
	# 文本的矩形区域
	var rect = Rect2(offset_pos,text.get_size())
	
	# 半径 = 对角线长度的一半
	var r = text.get_size().length()/2.0
	# 绘制外接圆
	draw_circle(rect.get_center(),r,bg_color)
	## 绘制文本矩形区域
	#draw_rect(rect,Color.DARK_GRAY)
	# 绘制字符串
	text.draw(canvas,offset_pos,color)

测试1

extends Node2D

var points:PackedVector2Array

func _ready() -> void:
	for i in range(6):
		points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 100)

func _draw() -> void:
	draw_colored_polygon(points,Color.YELLOW_GREEN)
	for i in range(points.size()):
		draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

效果：

image.png

测试2

extends Node2D

var points:PackedVector2Array

func _ready() -> void:
	for i in range(6):
		points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 100)
		points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 50)

func _draw() -> void:
	draw_colored_polygon(points,Color.YELLOW_GREEN)
	for i in range(points.size()):
		draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

image.png

测试3

extends Node2D

var points:PackedVector2Array

func _ready() -> void:
	var pos = Vector2(500,300)
	var right = Vector2.RIGHT
	var step = 30
	var r1 = 200
	var r2 = 160
	
	for i in range(step):
		var ag = deg_to_rad(360.0/step)
		points.append(pos + right.rotated(ag * i) * r1)
		points.append(pos + right.rotated(ag * i) * r2)

func _draw() -> void:
	draw_colored_polygon(points,Color.YELLOW_GREEN)
	for i in range(points.size()):
		draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

在这里插入图片描述

实现任意文本标记

修改一下函数的参数，就可以实现任意文本的绘制。

# 绘制带有文本的圆，用于标记几何图形顶点索引或显示坐标等
func draw_point_idx(canvas:RID,pos:Vector2,string:String,bg_color:=Color.YELLOW,color:=Color.BLACK,font_size:=16,font:Font = ThemeDB.fallback_font):
	# 构造TextLine
	var text = TextLine.new()
	text.add_string(string,font,font_size) # 按设置的字体和字号添加编号
	
	
	var offset_pos = pos - text.get_size()/2.0  # 文本矩形中心对齐到pos
	# 文本的矩形区域
	var rect = Rect2(offset_pos,text.get_size())
	
	# 半径 = 对角线长度的一半
	var r = text.get_size().length()/2.0
	# 绘制外接圆
	draw_circle(rect.get_center(),r,bg_color)
	## 绘制文本矩形区域
	#draw_rect(rect,Color.DARK_GRAY)
	# 绘制字符串
	text.draw(canvas,offset_pos,color)

测试代码：

extends Node2D

var points:PackedVector2Array

var pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 30
var r1 = 200
var r2 = 160

func _ready() -> void:
	for i in range(step):
		var ag = deg_to_rad(360.0/step)
		points.append(pos + right.rotated(ag * i) * r1)
		points.append(pos + right.rotated(ag * i) * r2)

func _draw() -> void:
	draw_colored_polygon(points,Color.YELLOW_GREEN)
	draw_point_idx(get_canvas_item(),pos,"C",Color(Color.YELLOW,0.5),Color.BLACK,10)
	for i in range(points.size()):
		draw_point_idx(get_canvas_item(),points[i],str(i),Color(Color.YELLOW,0.5),Color.BLACK,10)

绘制效果：
image.png

综合实例

extends Node2D

var points:PackedVector2Array

var pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 12
var r1 = 200

func _ready() -> void:
	for i in range(step):
		var ag = deg_to_rad(360.0/step)
		var p = pos + right.rotated(ag * i) * r1
		points.append(p)
		

func _draw() -> void:
	draw_arc(pos,r1,0,TAU,100,Color.AQUAMARINE,1)    # 外接圆
	
	draw_colored_polygon(points,Color.YELLOW_GREEN)  # 多边形
	
	# 按顺序标记多边形顶点
	for i in range(points.size()):
		draw_line(pos,points[i],Color.DARK_GREEN,1)  # 圆心到多边形顶点的连线
		draw_point_idx(get_canvas_item(),points[i],str(i),Color(Color.YELLOW,0.5),Color.BLACK,10)
	
	# 标记圆心
	draw_point_idx(get_canvas_item(),pos,"圆心",Color(Color.YELLOW,0.5),Color.BLACK,10)
	
	# 标记单个角度
	var ang = TAU/step
	draw_arc(pos,30,0,ang,100,Color.DARK_GREEN,1)
	draw_point_idx(get_canvas_item(),pos + right.rotated(ang/2.0) * 40, "%s°" % str(rad_to_deg(ang)),Color(Color.YELLOW,0.0),Color.BLACK,10)

绘制效果：
image.png

总结

  • 标记和绘制点索引是一种很常用且重要的效果
  • 本文只是涉及了点索引在几何图形上的使用，实际上可以将它使用在类似标记AStar路径点这样的功能上，让原本抽象的内容一下子变得清晰

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/541823.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【JavaScript | RegExp】正则表达式

【JavaScript | RegExp】正则表达式

本文原创于CSDN秋说，未经授权，不得转载。 文章目录 定义特殊字符元字符字符表格汇总特殊结构标记优先级实例匹配常见的 HTTP 或 HTTPS URL匹配路径匹配URL的各个部分全局搜索邮箱正则表达式日期匹配正则表达式特殊字段匹配正则表达式匹配邮箱正则表达式用…
阅读更多...
在Windows中用命令行编译C项目

在Windows中用命令行编译C项目

在Windows中可以用命令行编译C项目 官方指导文档： 演练：在命令行上编译 C 程序 | Microsoft Learn 在官方文档中可以看到，可以只安装VS的命令行工具集，如下图所示
阅读更多...
MySQL8.0.36-社区版：错误日志（2）

MySQL8.0.36-社区版：错误日志（2）

mysql有个错误日志，是专门记录错误信息的，这个功能默认是开启的 一般都是在/var/log/mysqld.log 日志中存放 1.错误日志的位置 首先我们使用命令去查看一下，这个错误日志文件究竟在哪 进入到mysql中，使用命令 show variables…
阅读更多...
009、Python+fastapi，第一个后台管理项目走向第9步：ubutun 20.04下安装vscode+git环境配置

009、Python+fastapi，第一个后台管理项目走向第9步：ubutun 20.04下安装vscode+git环境配置

一、说明 git是一定要配置的，由于是白嫖的无影云电脑，东西得保存在网上，就继续白嫖gitee吧，显然国内github是不太合适的了 二、安装git 直接安装sudo apt install -y git git --version git version 2.25.1 三、配置git 在git上…
阅读更多...
使用阿里云试用Elasticsearch学习：使用内置模型 lang_ident_model_1 创建管道并使用

使用阿里云试用Elasticsearch学习：使用内置模型 lang_ident_model_1 创建管道并使用

文档：https://www.elastic.co/guide/en/machine-learning/current/ml-nlp-deploy-model.html 部署刚刚下载好的内置模型 部署内存不够用 还得花钱，拉几把倒吧。就用自带的吧。 测试模型 POST _ml/trained_models/lang_ident_model_1/_infer {"doc…
阅读更多...
MySQL-触发器：触发器概述、触发器的创建、查看删除触发器、 触发器的优缺点

MySQL-触发器：触发器概述、触发器的创建、查看删除触发器、 触发器的优缺点

触发器 触发器1. 触发器概述2. 触发器的创建2.1 创建触发器语法2.2 代码举例 3. 查看、删除触发器3.1 查看触发器3.2 删除触发器 4. 触发器的优缺点4.1 优点4.2 缺点4.3 注意点 注：此为笔者学习尚硅谷-宋红康MySQL的笔记，其中包含个人的笔记和理解&#…
阅读更多...
HarmonyOS实战开发-横竖屏切换

HarmonyOS实战开发-横竖屏切换

介绍 本实例展示如何使用媒体查询，通过ohos.mediaquery 接口完成在不同设备上显示不同的界面效果。 效果预览 使用说明 1.在竖屏设备上，首页展示新闻列表，点击新闻进入详情界面。 2.在横屏设备上，首页左侧展示新闻列表&#x…
阅读更多...
RT-Thread内核简介

RT-Thread内核简介

1、RT-Thread 内核介绍 RT-Thread 内核架构图，内核处于硬件层之上，内 核部分包括内核库、实时内核实现 内核库是为了保证内核能够独立运行的一套小型的类似 C 库的函数实现子集。这部分根据编译器的不 同自带 C 库的情况也会有些不同，当使用 GNU GCC 编译器时，会携带…
阅读更多...
STM32外设配置以及一些小bug总结

STM32外设配置以及一些小bug总结

USART RX的DMA配置 这里以UART串口1为例，首先点ADD添加RX和TX配置DMA，然后模式一般会选择是normal，这个模式是当DMA的计数器减到0的时候就不做任何动作了，还有一种循环模式，是计数器减到0之后，计数器自动重…
阅读更多...
【GD32】MQ-3酒精检测传感器

【GD32】MQ-3酒精检测传感器

2.31 MQ-3酒精检测传感器 MQ-3气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(Sn0)。当传感器所处环境中存在酒精蒸气时，传感器的电导率随空气中酒精蒸气浓度的增加而增大。使用简单的电路即可将电导率的变化转换为与该气体浓度相对应的输出信号。…
阅读更多...
嵌入式STM32F407CET6移植OpenHarmony系统方法

嵌入式STM32F407CET6移植OpenHarmony系统方法

第一：【实验目的】 1、STM32F407CET6开发版移植鸿蒙系统的方式 第二：【实验原理】 涉及到原理图添加原理图--普通STM32F407原理图第三：【实验步骤】 一、下载LiteOs源码，复制到到虚拟机中并解压 https://gitee.com/LiteOS/LiteOS
阅读更多...
政安晨：【Keras机器学习实践要点】（二十九）—— 半监督图像分类使用具有SimCLR对比性预训练的方法

政安晨：【Keras机器学习实践要点】（二十九）—— 半监督图像分类使用具有SimCLR对比性预训练的方法

目录 介绍 半监督学习 对比学习 设置 超参数设置 数据集 图像增强 编码器结构 有监督基线模型 用于对比预训练的自我监督模型 对预训练编码器进行有监督微调 与基准线的比较 进一步改进 架构 超参数 相关工作 政安晨的个人主页：政安晨 欢迎 &#x…
阅读更多...
Guava里一些比较常用的工具

Guava里一些比较常用的工具

随着java版本的更新提供了越来越多的语法和工具来简化日常开发，但是我们一般用的比较早的版本所以体验不到。这时就用到了guava这个包。guava提供了很多方便的工具方法，solar框架就依赖了guava的16.0.1版本，这里稍微介绍下。 一、集合工具类…
阅读更多...
20240413，类和对象

20240413，类和对象

对象：一切都可为对象，类：相同特性的对象；面向对象特性：封装，继承，多态 一，封装 CLASS 类名 { 访问权限 ：属性/行为 } 实例化：通过一个类，创建一…
阅读更多...
0101tomcat部署war访问mysql失败-容器间通信-docker项目部署

0101tomcat部署war访问mysql失败-容器间通信-docker项目部署

文章目录 一、简介二、部署1、mysql数据迁移2、docker部署redis3、docker部署tomcat并运行war包 三、报错四、解决1 分析2 解决 结语 一、简介 最近参与开发一个项目，其中一部分系统需要迁移。从阿里云迁移到实体服务器，使用docker部署。系统使用Java语…
阅读更多...
11 Php学习：函数

11 Php学习：函数

PHP 内建函数Array 函数 PHP Array 函数是 PHP 核心的组成部分。无需安装即可使用这些函数。 创建 PHP 函数 当您需要在 PHP 中封装一段可重复使用的代码块时，可以使用函数。下面详细解释如何创建 PHP 函数并举例说明。 创建 PHP 函数的语法 PHP 函数的基…
阅读更多...
TCP-IP详解卷一：协议——阅读总结

TCP-IP详解卷一：协议——阅读总结

该内容适合程序员查看 第1章 概述 1.1 引言 WAN全称是 Wide Area Network，中文名为广域网。 LAN全称是 Local Area Network，中文名为局域网。 1.2分层 ICP/IP协议族通常被认为是一个四层协议系统 分层协议应用层Telnet、FTP和e-mail运输层TCP和UDP网…
阅读更多...
shell 调用钉钉通知

shell 调用钉钉通知

使用场景：机器能访问互联网，运行时间任务后通知使用 钉钉建立单人群 手机操作，只能通过手机方式建立单人群 电脑端 2. 配置脚本 #!/bin/bash set -e## 上图中 access_token字段 TOKEN KEYWORDhello # 前文中设置的关键字 function call_…
阅读更多...
机器学习——自动驾驶

机器学习——自动驾驶

本章我们主要学习以下内容: 阅读自动驾驶论文采集数据根据论文搭建自动驾驶神经网络训练模型在仿真环境中进行自动驾驶 论文介绍 本文参考自2016年英伟达发表的论文《End to End Learning for Self-Driving Cars》 📎end2end.pdf
阅读更多...
Redis从入门到精通(十七)多级缓存(二)Lua语言入门、OpenResty集群的安装与使用

Redis从入门到精通(十七)多级缓存(二)Lua语言入门、OpenResty集群的安装与使用

文章目录 前言6.4 Lua语法入门6.4.1 初识Lua6.4.2 Hello World6.4.3 变量6.4.3.1 Lua的数据类型6.4.3.2 声明变量 6.4.4 循环6.4.5 函数6.4.6 条件控制 6.5 实现多级缓存6.5.1 安装和启动OpenResty6.5.2 实现ajax请求反向代理至OpenResty集群6.5.2.1 反向代理配置6.5.2.2 OpenR…
阅读更多...
最新文章

Copyright @ 2022~2023