裁剪UI Image 矩形四角圆形 Shader

Shader "Custom/CullImage" {

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
_Radius("序列帧播放速度",Float) = 0.1

}

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
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

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

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

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

fixed4 _Color;
fixed4 _TextureSampleAdd;

bool _UseClipRect;
float4 _ClipRect;

bool _UseAlphaClip;
float i;
float p;
float j;
float k;
float _Radius;

v2f vert(appdata_t IN)
{
v2f OUT;
OUT.worldPosition = IN.vertex;

OUT.vertex = mul(UNITY_MATRIX_MVP, OUT.worldPosition);

OUT.texcoord = IN.texcoord;

#ifdef UNITY_HALF_TEXEL_OFFSET
OUT.vertex.xy += (_ScreenParams.zw - 1.0)*float2(-1,1);
#endif

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

sampler2D _MainTex;

fixed4 frag(v2f IN) : SV_Target
{

half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
float2 uv = IN.texcoord.xy;
float4 c = IN.color;
// 左下四方块
if (uv.x < _Radius && uv.y < _Radius)
{
float2 r;
r.x = uv.x - _Radius;
r.y = uv.y - _Radius;
float rr = length(r);
// 裁剪
if (rr > _Radius)
{
c.a = 0;
}
}
// 左上四方块
else if (uv.x < _Radius && uv.y > 1 - _Radius)
{
float2 r;
r.x = uv.x - _Radius;
r.y = uv.y + _Radius - 1;
float rr = length(r);
// 裁剪
if (rr > _Radius)
{
c.a = 0;
}
}
// 右下四方块
else if (uv.x > 1 - _Radius && uv.y < _Radius)
{
float2 r;
r.x = uv.x + _Radius - 1;
r.y = uv.y - _Radius;
float rr = length(r);
// 裁剪
if (rr > _Radius)
{
c.a = 0;
}
}
// 右上四方块
else if (uv.x > 1 - _Radius && uv.y > 1 - _Radius)
{
float2 r;
r.x = uv.x + _Radius - 1;
r.y = uv.y + _Radius - 1;
float rr = length(r);
// 裁剪
if (rr > _Radius)
{
c.a = 0;
}
}

fixed4 col = tex2D(_MainTex, IN.texcoord) * c;
clip(col.a - 0.01);

if (_UseClipRect)
color *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

if (_UseAlphaClip)
clip(color.a - 0.001);
return col;
}

ENDCG
}
}
}

时间: 2024-10-05 14:46:51

裁剪UI Image 矩形四角圆形 Shader的相关文章

CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

绘制一些基本图形(例如矩形,圆形,椭圆,多边形)

drawRect:矩形 drawCircle:绘制圆形 drawOval:椭圆 drawPath:任意多边形 drawLine:直线 drawPoint:绘制点 代码示例 第一种 package com.example.examples_05_05; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graph

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 1 #square {

Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fillRect 方法规定了形状.位置和尺寸. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/cs

[转]html5 Canvas画图教程(9)—canvas中画出矩形和圆形

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形.当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟. canvas画矩形 1,fillRect与strokeRect fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式:同理strokeRect就是直接描边一个矩形 他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高).这里的起点,注意,是指矩形的左上角那个点. 我们通常用他们来做简单的事,他们也只能做简单的事.为什

Canvas---Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整合代码版

 使用Canvas实现画图程序.(转载注明出处与作者啊) 本次主要更新了一下功能: 新添加图形:矩形,圆形,圆角矩形 实现了描边颜色与填充颜色的选择 使用类似mvc的模式重新整理了代码. M层: 特殊图形的路径规划代码组成,只包含路径规划,无样式设计. V层:设计样式,调用路径规划代码,实际绘制图案.在这里完成填充.描边. C层:判断选择框内容,调用不同的实际绘制代码 其他:事件处理与辅助计算函数等 不足:感觉代码结构还是不够好,果然是我没用面向对象么? 下面是效果图: 下面是源代码: ①本

android 利用Bitmap获取圆角矩形、圆形图片

1.在很多时候,我们要显示图片资源,需要将他的资源显示为圆角的:示例源码如下: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,float roundPx){ Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap .getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); final

html5 canvas绘制矩形和圆形

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="draw(),drawarc()"> <!--绘制的步骤:获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式--> <!--绘制其他复杂图

3. Quartz2D 绘制矩形、圆形、弧形

#pragma mark 绘制圆弧 -(void) drawArc:(CGContextRef)context{ //1.设置路径 /** 1)context 上下文 2)x,y 圆弧所在圆的中心点坐标 3)radius 半径 4)startAngle endAngle起始角度和截止角度,单位是弧度 0度 对应圆的最右侧点 5)clockwise 顺时针或逆时针 */ CGContextAddArc(context, 160, 230, 100, -M_PI_2, M_PI_2, 1); //2