当前位置:网站首页>Unity_圆环滑动条(圆形、弧形滑动条)
Unity_圆环滑动条(圆形、弧形滑动条)
2022-08-08 06:26:00 【GREAT1217】
效果
![]() | ![]() |
基础效果 | 角度(弧度)限制 |
![]() | ![]() |
滑块手柄指向圆心 | 滑块手柄指向路径 |
功能介绍

如上图所示,主要功能包括:
FillOrigin:和 UGUI 的 Image (Filled类型)的一样,设置圆环起始方位。包含上下左右四个方位
Clockwise:和 UGUI 的 Image (Filled类型)的一样,使用顺时针或逆时针
WholeNumbers:和 UGUI 的 Slider 一样,是否使用整数值的 Value
MinValue、MaxValue、Value:和 UGUI 的 Slider 一样,其中 Value 可在非运行模式下直接拖动查看效果
MaxAngle:最大角度。可设置圆环最大角度 0° ~ 360° ,可通过此功能实现任意角度的弧形滑动条
Radius:设置圆环的半径,调整滑块手柄的位置,此参数需要用户根据实际效果自行调整,可在非运行模式下直接修改查看效果
TowardCenter:设置滑动手柄是否朝向中心,可以设置角度偏移实现朝向圆环的效果
UnityEvent:事件接口包含 OnValueChanged<float> 、OnBeginDragged、OnDragging、OnEndDragged,可在 Inspector 面板或使用 AddListener() 绑定回调函数
代码介绍
实现思路:在鼠标点击后拖动时,根据鼠标在圆环Image.rectTransform上的位置 => 求出角度(相对于X轴右侧 180°表示)=> 相对于起始点的角度(360° 表示)=> 圆环Image.fillAmount和滑块手柄rect.localPosition。
其中主要代码为:
//根据鼠标在圆环Image.rectTransform上的位置
Vector2 localPoint;
if (RectTransformUtility.ScreenPointToLocalPointInRectangle(_fillImage.rectTransform, eventData.position, eventData.pressEventCamera, out localPoint))
{
// 求出角度(相对于X轴右侧 180°表示)=> 相对于起始点的角度(360° 表示)=> 圆环Image.fillAmount和滑动rect.localPosition。
}
本项目代码参考了UGUI源码(GitHub链接)的编码风格(主要参考了Slider.cs、SliderEditor.cs)
例如:部分函数名:
UpdateCachedReferences();
UpdateVisual();
属性赋值时的判断:
private static bool SetStruct<T>(ref T setValue, T value) where T : struct
{
if (EqualityComparer<T>.Default.Equals(setValue, value)) return false;
setValue = value;
return true;
}
private static bool SetClass<T>(ref T setValue, T value) where T : class
{
if (setValue == null && value == null || setValue != null && setValue.Equals(value)) return false;
setValue = value;
return true;
}
使用示例
最上面有GitHub地址
边栏推荐
猜你喜欢
随机推荐
PyTorch向量变换基本操作
[Unity] 状态机事件流程框架 (一)(C#事件系统,Trigger与Action)
P19 美颜相机的实现——基础铺垫1
Industry Research: Analysis of the Status and Prospects of the Pension Insurance Market in 2022
最详细的Vivado安装教程
虚拟机克隆 快照 迁移 删除
P22 美颜相机——引入动态数组,优化重绘
用C语言实现万年历的代码及思路(详细教程)
在ENSP中配置DHCP服务器
RCNN目标检测原文理解
ExecutionEngineException: String conversion error: Illegal byte sequence encounted in the input.
NVIDIA CUDA Highly Parallel Processor Programming (8): Parallel Mode: Histogram Calculation
TextCNN实现imdb数据集情感分类任务
NVIDIA CUDA 高度并行处理器编程(四):性能优化习题
ResNet 原理与代码复现
传统图像特征提取方法:边缘与角点
Unity—ParticleSystem (particle system) and Animator (animation state machine) batch manager
关系抽取论文阅读笔记
网络配置——静态路由内网以及外网连接
ACM latex