【Unity】RawImage UvRect 与UGUI坐标转换

由于提出一种需求类似于这种效果

最开始想到的是用遮罩，于是在知识海洋中找了一个Shader 加以修改实现效果

Shader "Tang/GuideMask"
{
Properties
{
[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
_Color("Tint", Color) = (1,1,1,1)

//_StencilComp("Stencil Comparison", Float) = 8
//_Stencil("Stencil ID", Float) = 0
//_StencilOp("Stencil Operation", Float) = 0
//_StencilWriteMask("Stencil Write Mask", Float) = 255
//_StencilReadMask("Stencil Read Mask", Float) = 255

_ColorMask("Color Mask", Float) = 15
_Length("Lenth",Float) = 3
//中心
_Origin("圆心",Vector) = (0,0,0,0)
//裁剪方式 0圆形 1圆形
_MaskType("Type",Float) = 0
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
}

SubShader
{
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}

Stencil
{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}

Cull Off
Lighting Off
ZWrite Off
ZTest[unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask[_ColorMask]

Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0

#include "UnityCG.cginc"
#include "UnityUI.cginc"

#pragma multi_compile __ UNITY_UI_ALPHACLIP



struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};

struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};

fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _Origin;
float4 _Origin1;
float _MaskType;

//Test
uniform float4 _Points[100];  // 数组变量
uniform float _Points_Num;  // 数组长度变量

//顶点函数，输入参数是网格数据，输出的是顶点到片元结构体
v2f vert(appdata_t IN)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(IN);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

OUT.texcoord = IN.texcoord;

OUT.color = IN.color * _Color;
return OUT;
}

sampler2D _MainTex;

fixed4 frag(v2f IN) : SV_Target
{
float2 uv = IN.texcoord;
half4 col = IN.color;
//开始裁剪
//外部直接给坐标 宽 高 GPU计算比率
float posX = (_Origin.x + 960) / 1920;
float posY = (_Origin.y + 540) / 1080;
float2 pos = float2(posX, posY);


//float posX = 0;
//float posY = 0;
//if (_MaskType == 0) {
//posX = posX * 1280 / 720;
//pos = float2(posX, posY);
//float rid = _Origin.z / 720 / 2;
//uv.x = uv.x * 1280 / 720;
//float2 nor = uv-pos;
//if (length(nor) < rid)
//col.a = 0;
//}
//else {
float w = _Origin.z / 1920 / 2;
float h = _Origin.w / 1080 / 2;


//float w =0;
//float h =0;

//float result1 = 0;
//float result2 = 0;
//float result3 = 0;
//float result4 = 0;

//for (int j=0; j<_Points_Num; j++)
//{
//    float4 p4 = _Points[j]; // 索引取值
//	posX = ( _Points[j].x + 960) / 1920;
//    posY = ( _Points[j].y + 540) / 1080;
//	w = _Points[j].z / 1920 /2;
//	h = _Points[j].w / 1080 /2;
//	result1 += posX - w;
//	result2 += posX + w;
//	result3 += posY - h;
//	result4 += posY + h;
//    // 自定义处理
//}

//if (uv.x <= result1|| uv.x>=result2|| uv.y<=result3|| uv.y >= result4)
//{
//col.a = 0.001f;
//}


if (uv.x > pos.x - w && uv.xpos.y - h && uv.y < pos.y + h)
{
//col.a = 0.5f;
}
else{
col.a = 0.001f;
}


half4 color = (tex2D(_MainTex,uv) + _TextureSampleAdd) * col;
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
clip(col.a);
#ifdef UNITY_UI_ALPHACLIP
clip(color.a - 0.001);
#endif

return color;
}
ENDCG
}
}
}

后来 由于要多个UI支持 唉 要了一个不会写Shader的老命，后来研究许久，转换了思路

利用UV 去实现

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class TestImage : MonoBehaviour
{

    private RectTransform raw;

    public CanvasScaler canvaScaler;
    private float screenHeight;
    private float screenWidth;
    void Start()
    {
        raw = GetComponent();
        //获取设置分辨率
        screenWidth = canvaScaler.referenceResolution.x;
        screenHeight = canvaScaler.referenceResolution.y;
    }

    void Update()
    {

        var posX = (raw.anchoredPosition.x + screenWidth / 2) / screenWidth;
        var posY = (raw.anchoredPosition.y + screenHeight / 2) / screenHeight;
        var w1 = raw.rect.width / screenWidth / 2;
        var h1 = raw.rect.height / screenHeight / 2;
        var x = raw.anchoredPosition.x;
        var y = raw.anchoredPosition.y;
        var w = raw.rect.width;
        var h = raw.rect.height;


        var pow = raw.rect.width / screenWidth;
        var poh = raw.rect.height / screenHeight;
        //Debug.Log("X " + (posX - w1));
        //Debug.Log("Y " + (posY - h1));
        //Debug.Log("W " + pow);
        //Debug.Log("H " + poh);
        var uvRect = GetComponent();

        uvRect.uvRect = new Rect(posX - w1, posY - h1, pow, poh);
    }

}