文档章节

UGUI 橡皮擦效果

 江湖令
发布于 2016/03/11 14:40
字数 520
阅读 165
收藏 1

原理主要是通过鼠标点击UI的位置,将当前图片的alpha(透明通道)改为0,然后通过Shader叠加渲染

大致效果就是这样:

属性编辑窗口需要填写图片的大小和橡皮檫的大小

界面布局如下:



以下为C#脚本,主要负责计算当前需要镂空的像素位置,并将当前像素点上的颜色值Color.a=0

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

public class UIEraserTexture : MonoBehaviour ,IPointerDownHandler,IPointerUpHandler{
    
    public  RawImage image;
    public  int brushScale = 4;
    public int imageWidth;
    public int imageHeight;
    Texture2D texRender;
    RectTransform mRectTransform;
    Canvas canvas;
    
    void Awake(){
        mRectTransform = GetComponent<RectTransform> ();
        canvas = GameObject.Find("Canvas").GetComponent<Canvas>();
    }
    
    void Start () 
    {
        //texRender = new Texture2D(image.mainTexture.width, image.mainTexture.height,TextureFormat.ARGB32,true);
        texRender = new Texture2D(imageWidth, imageWidth,TextureFormat.ARGB32,true);
        Reset ();
        
    }
    
    bool isMove = false;
    
    public void OnPointerDown(PointerEventData data)
    {
        start = ConvertSceneToUI (data.position);
        isMove = true;
    }
    
    public void OnPointerUp(PointerEventData data)
    {
        isMove = false;
        OnMouseMove (data.position);
        start = Vector2.zero;
    }
    
    void Update(){
        if (isMove) {
            OnMouseMove (Input.mousePosition);
        }
    }
    
    Vector2 start = Vector2.zero;
    Vector2 end = Vector2.zero;
    
    Vector2 ConvertSceneToUI(Vector3 posi){
        Vector2 postion;
        if(RectTransformUtility.ScreenPointToLocalPointInRectangle(mRectTransform , posi, canvas.worldCamera, out postion)){
            return postion;
        }
        return Vector2.zero;
    }
    
    void OnMouseMove(Vector2 position)
    {
        end = ConvertSceneToUI (position);
        Draw (new Rect (end.x+texRender.width/2, end.y+texRender.height/2, brushScale, brushScale));
        
        if (start.Equals (Vector2.zero)) {
            return;
        }
        
        Rect disract = new Rect ((start+end).x/2+texRender.width/2, (start+end).y/2+texRender.height/2, Mathf.Abs (end.x-start.x), Mathf.Abs (end.y-start.y));
        
        for (int x = (int)disract.xMin; x < (int)disract.xMax; x++) {
            for (int y = (int)disract.yMin; y < (int)disract.yMax; y++) {
                Draw (new Rect (x, y, brushScale, brushScale));
            }
        }       

        start = end;
    }
    
    void Reset(){
        
        for (int i = 0; i < texRender.width; i++) {
            
            for (int j = 0; j < texRender.height; j++) {
                
                Color color = texRender.GetPixel (i,j);
                color.a = 1;
                texRender.SetPixel (i,j,color);
            }
        }
        
        texRender.Apply ();
        image.material.SetTexture ("_RendTex",texRender);
        
    }
    
    void Draw(Rect rect){
        for (int x = (int)rect.xMin; x < (int)rect.xMax; x++) {
            for (int y = (int)rect.yMin; y < (int)rect.yMax; y++) {
                if (x < 0 || x > texRender.width || y < 0 || y > texRender.height) {
                    return;
                }
                Color color = texRender.GetPixel (x,y);
                color.a = 0;
                texRender.SetPixel (x,y,color);
            }
        }
        
        texRender.Apply();
        image.material.SetTexture ("_RendTex",texRender);
    }
    
}


接下来就是shader了

Shader "Unlit/Transparent Colored Eraser"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _RendTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
    }
 
    SubShader
    {
        LOD 200
         
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
         
        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Fog { Mode Off }
            Offset -1, -1
            ColorMask RGB
            AlphaTest Greater .01
            Blend SrcAlpha OneMinusSrcAlpha
            ColorMaterial AmbientAndDiffuse
         
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
         
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _RendTex;
         
            struct appdata_t
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
            };
             
            struct v2f
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
            };
             
            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                return o;
            }
         
            half4 frag (v2f IN) : COLOR
            {
                // Sample the texture
                half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
                half4 rnd = tex2D(_RendTex, IN.texcoord) * IN.color;
                col.a =  rnd.a;
                return col;
                }
            ENDCG
        }
    }
}


© 著作权归作者所有

上一篇: 高斯模糊
下一篇: UI根据鼠标移动
粉丝 2
博文 80
码字总数 18313
作品 0
西安
私信 提问
Unity游戏开发——UnityUGUI打包图集

现在Unity中使用UGUI实现UI的越来越多,我们项目也才4.6.1升级到5.6.3对项目全面升级。5.x中UGUI已经非常成熟,各种资料各种效果都非常多。由于之前一直习惯用NGUI在使用UGUI还是比较顺利的,...

liang_704959721
2017/09/14
0
0
「Unity3D」(4)使用AnimBool自定义Inspector动画效果

Unity自己的组件,Inspector面板都有动画效果,本文将会结合UGUI中ImageEditor的动画效果,介绍一下Inspector动画效果如何实现。UGUI的源码,这里获取 UGUI,ImageEditor。 首先看一下,Ima...

tom_221x
2017/11/08
0
0
Unity3D,(4)使用AnimBool自定义Inspector动画效果

Unity自己的组件,Inspector面板都有动画效果,本文将会结合UGUI中ImageEditor的动画效果,介绍一下Inspector动画效果如何实现。UGUI的源码,这里获取 UGUI,ImageEditor。 首先看一下,Ima...

scottcgi
2017/11/08
0
0
基于canvas剪辑区域功能实现橡皮擦效果

这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下 效果如图 这是基础结构 没什么好说的?<!DOCTYPE html><html lang="en"><head> ...

嫣然丫丫丫
2018/11/25
0
0
使用原生JavaScript实现一个canvas画板

前言 本文在 canvas实现画板功能的基础上进行了一些完善。 可以通过Canvas_API了解canvas。 完成效果: 4. 代码直接使用了ES6的语法,在谷歌浏览器(版本 76.0.3809.100)上能实现预期的效果...

任沫
08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端教程分享web前端入门基础知识

  好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行,必须对这三门语言都要熟悉。下面我们一起来看一看吧! ...

好程序员官网
25分钟前
3
0
elasticsearch 中文分词插件IK-Analyze

elasticsearch 版本 7.3 安装中文分词插件 插件对应的版本需要和elasticsearch的版本一致 插件各个版本下载地址 https://github.com/medcl/elasticsearch-analysis-ik/releases 使用elastic...

kdy1994
29分钟前
4
0
只用一套解决方案,就可解决80%的交通物流行业信息难题

行业背景 新中国成立70多年来,中国交通运输总体上已经形成了多节点、全覆盖的综合运输网络,“五纵五横”综合运输大通道基本贯通,一大批综合客运、货运枢纽站场(物流园区)投入运营,取得...

朕想上头条
31分钟前
4
0
spring-boot结合AOP实现数据源动态配置

Spring-Boot+AOP方式实现多数据源切换 设计总体思路:Spring-Boot+AOP方式实现多数据源切换,继承AbstractRoutingDataSource实现数据源动态的获取,在service层使用注解指定数据源。 一、多数...

蜗牛伊
32分钟前
3
0
干货 | 京东技术中台的Flutter实践之路

在 2019 年,Flutter 推出了多个正式版本,支持的终端越来越多,使用的项目也越来越多。Flutter 正在经历从小范围尝鲜到大面积应用的过程,越来越多的研发团队加入到 Flutter 的学习热潮中,...

京东云技术新知
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部