Unity在UI上使用MaskableGraphic类画一个矩形刻度尺

2024-06-11 04:29:45

项目中遇到一个需求：由于模型和UI像素的原因，项目中用尺子测量东西的时候肉眼读数与实际误差过大，为了减少误差需要在unity中把尺子的刻度画出来。一开始我是有点懵的，心想这unity怎么能画出一个类似于刻度的矩形呀，后来经过组长的指导，了解到UGUI中有一个MaskableGraphic类可以画线，就研究了一下该类原理，得以实现需求。

MaskableGraphic类画线原理

实际上Unity中的每一个UI元素都是由三角面片拼接而成的，首先新建一个UI元素的空物体，新建一个脚本继承MaskableGraphic类，重写OnPopulateMesh方法，默认执行基类方法看一下效果:

将脚本挂载到空物体上：

我们可以清楚的看到一张Image图片其实就是由两个三角面片组合而成的，基于这个原理我们就可以画出一个矩形来了。

重写OnPopulateMesh方法

实现的效果

MaskableGraphic绘制的时候是根据UI物体的锚点位置开始绘制的，默认不改锚点是这个效果：

将锚点Pivot改为0之后的效果：

根据实际需求找规律重写绘制方法实现了我想要的效果：
控制绘制矩形的数量

额外的知识

OnPopulateMesh方法

重写Graphic的OnPopulateMesh方法，在CanvasUpdateRegistry布局重建和图形重建时，会调用重建序列中的Graphic的Rebuild方法，Rebuild方法会调用OnPopulateMesh方法，为CanvasRenderer的Mesh提供了顶点、顶点颜色、UV和三角形信息。OnPopulateMesh方法把顶点数据和三角形信息保存到VertexHelper中。

需要注意的事

虽然使用MaskableGraphic类能减小像素带来的误差，但是如果绘制的时候设置的像素太小的话，遇到低分辨率的电脑就看不出来，解决方法：
将要绘制的UI空物体放到不受屏幕像素影响的canvas下绘制，适当增加面片的像素，canvas的组件canvas scaler的UI Scale Mode属性修改为Constant Pixel Size即无论屏幕大小如何，UI始终保持相同像素大小。

Unity在UI上使用MaskableGraphic类画一个矩形刻度尺相关推荐

WPF动态在画布（Canvas）上画一个矩形。
应用背景,现在有一个用WPF定义好的画布, <Canvas Name="MapCanvas" Height="{Binding MapTrackCanvasHeig ...
python在坐标轴上画矩形_Python使用matplotlib实现在坐标系中画一个矩形的方法
本文实例讲述了Python使用matplotlib实现在坐标系中画一个矩形的方法.分享给大家供大家参考.具体实现方法如下: import matplotlib.pyplot as plt from m ...
matlab 画一个矩形
画一个矩形 %rectangle('Position',[x,y,w,h],'PropertyName',propertyvalue) %axis([xmin,xmax,ymin,ymax]) clc ...
D2D 学习笔记第一课初始化D2D 画一个矩形
头文件 #include <D2D1.h> lib文件 #pragma comment(lib,"D2D1.lib") 首先新建一个 win32 程序加入头文件和l ...
计算机图形学（三）——画一个矩形
画一个矩形 main.cpp #include <iostream>// GLEW #define GLEW_STATIC #include <GL/glew.h>// GLF ...
D3D索引缓冲 - 画一个矩形
索引可以定义如何绘制几何体.比如,通过创建三角形来画一个四边形,每个三角形需要3个顶点,总共就需要6个顶点来创建一个四边形.若使用索引缓冲,则只需要4个顶点就可创建一个四边形.索引列表中第一个三角形的 ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
c++ 求四边形面积和周长_C++中运用类求一个矩形的面积和周长
题目是这样的:/*定义一个矩形类Rectangle,包含:保护数据成员:doubleLength;//矩形的长doubleWidth;//矩形的宽公有成员函数:doubleArea();//计算矩形的 ...
怎么用Photoshop直接画一个矩形边框
用Photoshop画矩形的时候,有时需要就画一个单一的边框,内部不需填充颜色,而且边框可以调节宽度和颜色.这时就可以用选择工具拉个矩形框,然后点主菜单,选编辑->描边,再在跳出的窗口选择相关的 ...
Unity在UI上绘制直线
prefabUILine为Image的预制作代码 using UnityEngine;public class UILineFactory : MonoBehaviour {public Rect ...

最新文章

热门文章