统一按钮：非矩形形状

Question

请看附图了解我。您可以看到按钮一和按钮二。但不幸的是按钮总是矩形的，但我希望它是平行四边形。

请大家帮帮我

Answer 1

在您的 Button 源图像中，在您的 Button 组件中，您可以为按钮使用 Unity 的 UISprite 默认按钮精灵。

如果您转到 Canvas 游戏对象 | Canvas 缩放器组件/每单位参考像素 并增加该值，按钮将更圆，如果减小该值，按钮将更矩形。

Answer 2

这已经完成并且仍在工作

结帐this thread。

设置：

调整你的形状纹理并制作它

像往常一样 Sprite（2D 和 UI）
网格类型 = 全矩形
Read/Write 已启用 = true

将您的按钮放在 Mask 对象下，这样您的层次结构就类似于

Canvas
|---MaskObject1 (with trapez texture)
|   |---Button1
|
|---MaskObject2
    |---Button2

在你的 Mask 上有一个额外的组件 RaycastMask。

脚本看起来像这样

using UnityEngine;
using UnityEngine.UI;
 
[RequireComponent(typeof(RectTransform))]
[RequireComponent(typeof(Image))]
public class RaycastMask : MonoBehaviour, ICanvasRaycastFilter
{
    private Image _image;
    private Sprite _sprite;
 
    void Start ()
    {
        _image = GetComponent<Image>();
    }
 
    public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
    {
        _sprite = _image.sprite;
 
        var rectTransform = (RectTransform)transform;
        Vector2 localPositionPivotRelative;
        RectTransformUtility.ScreenPointToLocalPointInRectangle((RectTransform) transform, sp, eventCamera, out localPositionPivotRelative);
 
        // convert to bottom-left origin coordinates
        var localPosition = new Vector2(localPositionPivotRelative.x + rectTransform.pivot.x*rectTransform.rect.width,
            localPositionPivotRelative.y + rectTransform.pivot.y*rectTransform.rect.height);
     
        var spriteRect = _sprite.textureRect;
        var maskRect = rectTransform.rect;
 
        var x = 0;
        var y = 0;
        // convert to texture space
        switch (_image.type)
        {
         
            case Image.Type.Sliced:
            {
                var border = _sprite.border;
                // x slicing
                if (localPosition.x < border.x)
                {
                    x = Mathf.FloorToInt(spriteRect.x + localPosition.x);
                }
                else if (localPosition.x > maskRect.width - border.z)
                {
                    x = Mathf.FloorToInt(spriteRect.x + spriteRect.width - (maskRect.width - localPosition.x));
                }
                else
                {
                    x = Mathf.FloorToInt(spriteRect.x + border.x +
                                         ((localPosition.x - border.x)/
                                         (maskRect.width - border.x - border.z)) *
                                         (spriteRect.width - border.x - border.z));
                }
                // y slicing
                if (localPosition.y < border.y)
                {
                    y = Mathf.FloorToInt(spriteRect.y + localPosition.y);
                }
                else if (localPosition.y > maskRect.height - border.w)
                {
                    y = Mathf.FloorToInt(spriteRect.y + spriteRect.height - (maskRect.height - localPosition.y));
                }
                else
                {
                    y = Mathf.FloorToInt(spriteRect.y + border.y +
                                         ((localPosition.y - border.y) /
                                         (maskRect.height - border.y - border.w)) *
                                         (spriteRect.height - border.y - border.w));
                }
            }
                break;
            case Image.Type.Simple:
            default:
                {
                    // conversion to uniform UV space
                    x = Mathf.FloorToInt(spriteRect.x + spriteRect.width * localPosition.x / maskRect.width);
                    y = Mathf.FloorToInt(spriteRect.y + spriteRect.height * localPosition.y / maskRect.height);
                }
                break;
        }
 
        // destroy component if texture import settings are wrong
        try
        {
            return _sprite.texture.GetPixel(x,y).a > 0;
        }
        catch (UnityException e)
        {
            Debug.LogError("Mask texture not readable, set your sprite to Texture Type 'Advanced' and check 'Read/Write Enabled'");
            Destroy(this);
            return false;
        }
    }
}

结果看起来像

Answer 3

您可以通过在按钮上添加新脚本的 1 行代码获得相同的结果：

在此脚本中，在 Start() 上只写：

GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f;

但是你需要像上面提到的那样更改图片的设置：
- 精灵（2D 和 UI）
- 网格类型 = 全矩形
- Read/Write 已启用 = true
Link 到教程：https://www.youtube.com/watch?v=8QxN7hQXkO8

统一按钮：非矩形形状

Unity Buttons: non-rectangular shape

unity3d

user-interface

assets

shapes