Unity 实现橡皮擦效果

我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的；

下面是效果

首先需要注意两点：1:设置 Main Camera 的 projection 属性为Orthographic

2:设置Canvas 的Render Mode 为 Screen Space - Camera

然后找一张图片，导入Unity 中并修改它的读写权限，创建Raw Imager

 

这样启动之后就可以测试效果了。

附上代码：（代码中有解释）

 using AYUI.UIFrame;
 using DG.Tweening;
 using System;
 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.EventSystems;
 using UnityEngine.UI;

 public class EraseMask : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
 {

     //是否擦除了
     public bool isStartEraser;

     //是否擦除结束了
     public bool isEndEraser;

     //开始事件
     public Action eraserStartEvent;

     //结束事件
     public Action eraserEndEvent;

     public RawImage uiTex;
     Texture2D tex;
     Texture2D MyTex;
     int mWidth;
     int mHeight;

     [Header("Brush Size")]
     public int brushSize = ;

     [Header("Rate")]
     public int rate = ;

     float maxColorA;
     float colorA;

     void Awake()
     {
         tex = (Texture2D)uiTex.mainTexture;
         MyTex = new Texture2D(tex.width, tex.height, TextureFormat.ARGB32, false);
         mWidth = MyTex.width;
         mHeight = MyTex.height;

         MyTex.SetPixels(tex.GetPixels());
         MyTex.Apply();
         uiTex.texture = MyTex;
         maxColorA = MyTex.GetPixels().Length;
         colorA = ;
         isEndEraser = false;
         isStartEraser = false;

     }

     /// <summary>
     /// 贝塞尔平滑
     /// </summary>
     /// <param name="start">起点</param>
     /// <param name="mid">中点</param>
     /// <param name="end">终点</param>
     /// <param name="segments">段数</param>
     /// <returns></returns>
     public Vector2[] Beizier(Vector2 start, Vector2 mid, Vector2 end, int segments)
     {
         float d = 1f / segments;
         Vector2[] points = new Vector2[segments - ];
         for (int i = ; i < points.Length; i++)
         {
             float t = d * (i + );
             points[i] = ( - t) * ( - t) * mid +  * t * ( - t) * start + t * t * end;
         }
         List<Vector2> rps = new List<Vector2>();
         rps.Add(mid);
         rps.AddRange(points);
         rps.Add(end);
         return rps.ToArray();
     }

     bool startDraw = false;
     bool twoPoints = false;
     Vector2 lastPos;//最后一个点
     Vector2 penultPos;//倒数第二个点
     float radius = 12f;
     float distance = 1f;

     #region 事件
     public void OnPointerDown(PointerEventData eventData)
     {
         if (isEndEraser) { return; }
         startDraw = true;
         penultPos = eventData.position;
         CheckPoint(penultPos);
     }

     public void OnDrag(PointerEventData eventData)
     {
         if (isEndEraser) { return; }
         if (twoPoints && Vector2.Distance(eventData.position, lastPos) > distance)//如果两次记录的鼠标坐标距离大于一定的距离，开始记录鼠标的点
         {
             Vector2 pos = eventData.position;
             float dis = Vector2.Distance(lastPos, pos);

             CheckPoint(eventData.position);
             int segments = (int)(dis / radius);//计算出平滑的段数
             segments = segments <  ?  : segments;
             if (segments >= ) { segments = ; }
             Vector2[] points = Beizier(penultPos, lastPos, pos, segments);//进行贝塞尔平滑
             for (int i = ; i < points.Length; i++)
             {
                 CheckPoint(points[i]);
             }
             lastPos = pos;
             if (points.Length > )
                 penultPos = points[points.Length - ];
         }
         else
         {
             twoPoints = true;
             lastPos = eventData.position;
         }
     }

     public void OnPointerUp(PointerEventData eventData)
     {
         if (isEndEraser) { return; }
         //CheckPoint(eventData.position);
         startDraw = false;
         twoPoints = false;
     }

     #endregion

     void CheckPoint(Vector3 pScreenPos)
     {
         Vector3 worldPos = Camera.main.ScreenToWorldPoint(pScreenPos);
         Vector3 localPos = uiTex.gameObject.transform.InverseTransformPoint(worldPos);

         if (localPos.x > -mWidth /  && localPos.x < mWidth /  && localPos.y > -mHeight /  && localPos.y < mHeight / )
         {
             for (int i = (int)localPos.x - brushSize; i < (int)localPos.x + brushSize; i++)
             {
                 for (int j = (int)localPos.y - brushSize; j < (int)localPos.y + brushSize; j++)
                 {
                     if (Mathf.Pow(i - localPos.x, ) + Mathf.Pow(j - localPos.y, ) > Mathf.Pow(brushSize, ))
                         continue;
                     if (i < ) { if (i < -mWidth / ) { continue; } }
                     if (i > ) { if (i > mWidth / ) { continue; } }
                     if (j < ) { if (j < -mHeight / ) { continue; } }
                     if (j > ) { if (j > mHeight / ) { continue; } }

                     Color col = MyTex.GetPixel(i + (int)mWidth / , j + (int)mHeight / );
                     if (col.a != 0f)
                     {
                         col.a = 0.0f;
                         colorA++;
                         MyTex.SetPixel(i + (int)mWidth / , j + (int)mHeight / , col);
                     }
                 }
             }

             //开始刮的时候 去判断进度
             if (!isStartEraser)
             {
                 isStartEraser = true;
                 InvokeRepeating("getTransparentPercent", 0f, 0.2f);
                 if (eraserStartEvent != null)
                     eraserStartEvent.Invoke();
             }

             MyTex.Apply();
         }
     }

     double fate;

     /// <summary>
     /// 检测当前刮刮卡 进度
     /// </summary>
     /// <returns></returns>
     public void getTransparentPercent()
     {
         if (isEndEraser) { return; }

         fate = colorA / maxColorA * ;

         fate = (float)Math.Round(fate, );

         // Debug.LogError("当前百分比: " + fate);

         if (fate >= rate)
         {
             isEndEraser = true;
             CancelInvoke("getTransparentPercent");
             gameObject.SetActive(false);

             //触发结束事件
             if (eraserEndEvent != null)
                 eraserEndEvent.Invoke();

         }
     }

 }

另附一张好用的图片 ：https://pan.baidu.com/s/1Z_GTuwPouFtiSgVcFfrAcg

提取码：da7t