【Unity-学习-022】扩展Unity自带的slider

Unity自带的slider是横向的，如图。

但是如何做出圆形的slider

第一步：一个基础背景图片---ImageA ，并在他上身添加  Slider 组件

第二步：在ImageA添加子物体 ---ImageB  图片，并把 ImageB  图片类型设置为 Filled

第三步：将ImageB赋值给父物体Slider 中的FillRect

这时，ImageB会变大，没关系，手动调整好就行了.

根据需要调整正常就行了。选中ImageB同时按住 Shift+Alt +鼠标左键  拖拽图片锚点边就可以以图片中心点为缩放重心，等比例调整图片大小。

此时就基本能用了改变Slider 的 Value 的值，这时候 图片就会跟着动了。

-----------------------------------------------------------------------------------------------------------------------------

但是，还不够。slider 两边还是直的。

第四步：用两个小圆点遮盖住两边的直边。

--------> 

 那么问题来了，另一边怎么办？

第五步：再ImageA添加一个圆点子Image起名字叫HandleMove，给slider添加以下脚本：

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class SliderPlus : MonoBehaviour
{
    public RectTransform handleMove;
    public Slider slider;
    public float radius = 0;

    private void Awake()
    {
        slider = GetComponent<Slider>();
        slider.onValueChanged.AddListener(SliderValueChanged);
        handleMove = transform.Find("HandleMove").GetComponent<RectTransform>();
    }

    public void SliderValueChanged(float arg0)
    {
        if (handleMove == null)
            return;
        float rad = (arg0 * 360 + 90) * Mathf.Deg2Rad;
        float x = radius * Mathf.Cos(rad);
        float y = radius * Mathf.Sin(rad);
        handleMove.anchoredPosition = new Vector2(-x, y);
    }
}

 并做如下设置：

根据需要自己调整 Radius，就可以完美的将第二个小圆点跟着另一边一起动。