经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » unity » 查看文章
Unity使用LineRender实现签名效果
来源：jb51　　时间：2021/10/11 9:22:36　　对本文有异议

本文为大家分享了Unity制作签名功能的具体代码，供大家参考，具体内容如下

前言：项目中需要做一个签名的功能，同时需要两个两个屏幕进行显示，但是都是在UI上，从网上查了大量资料。

找到两种方法：

1、修改图片像素点  但是是马赛克效果，不满足需求
2、使用LineRenderer 的3D签名制作出2D效果

改像素点：

先上代码

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4. using UnityEngine.UI;
  5.  
  6. public class Test : ObjBase
  7. {
  8.  
  9.     public GameObject m_obj;
  10.     private Texture2D m_tex;
  11.     public Color m_color;
  12.     public int size = 3;
  13.     private Color[] m_textureColorsStart;
  14.  
  15.  
  16.     public RawImage showImg;
  17.     void Start()
  18.     {
  19.         if (Display.displays.Length > 1)
  20.             Display.displays[1].Activate();
  21.         if (Display.displays.Length > 2)
  22.             Display.displays[2].Activate();
  23.         m_tex = m_obj.GetComponent<MeshRenderer>().material.mainTexture as Texture2D;
  24.         //从纹理中获取像素颜色
  25.         m_textureColorsStart = m_tex.GetPixels();
  26.         Debug.Log(m_tex.name);
  27.     }
  28.  
  29.  
  30.     void Update()
  31.     {
  32.         //Vector3 oldPos=Vector3.zero;
  33.         //oldPos = Input.mousePosition;
  34.         //Ray ray = uiCam.ScreenPointToRay(Input.mousePosition);
  35.         Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
  36.         RaycastHit hit;
  37.         if (Input.GetMouseButton(0))
  38.         {
  39.             // float m_magnitude = (Input.mousePosition - oldPos).magnitude;
  40.             // Vector3 dir = Input.mousePosition - oldPos;  
  41.             if (Physics.Raycast(ray, out hit))
  42.             {
  43.                 //在碰撞位置处的UV纹理坐标。
  44.                 Vector2 pixelUV = hit.textureCoord;
  45.                 //以像素为单位的纹理宽度
  46.                 pixelUV.x *= m_tex.width;
  47.                 pixelUV.y *= m_tex.height;
  48.                 //贴图UV坐标以右上角为原点
  49.                 for (float i = pixelUV.x - 1; i < pixelUV.x + size; i++)
  50.                 {
  51.                     for (float j = pixelUV.y - 1; j < pixelUV.y + size; j++)
  52.                     {
  53.                         m_tex.SetPixel((int)i, (int)j, m_color);
  54.                     }
  55.                 }
  56.                 Debug.Log(pixelUV);
  57.                 m_tex.Apply();
  58.                 showImg.texture = m_tex;
  59.             }
  60.         }
  61.         if (Input.GetKeyDown(KeyCode.Space))
  62.         {
  63.             //还原
  64.             m_tex.SetPixels(m_textureColorsStart);
  65.             m_tex.Apply();
  66.         }
  67.  
  68.  
  69.         //在处理鼠标按下的记录下位置，抬起的时候记录下位置，取2个位置中间的位置发射射线
  70.         //if (Input.GetMouseButtonDown(0))
  71.         //{
  72.  
  73.         //}
  74.         //if (Input.GetMouseButtonUp(0))
  75.         //{
  76.  
  77.         //}
  78.     }
  79.  
  80.     public void OnClick()
  81.     {
  82.        
  83.         showImg.texture = m_tex;
  84.     }
  85. }
  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4.  
  5. public class ObjBase : MonoBehaviour
  6. {
  7.     
  8.  
  9.     public bool IsShow
  10.     {
  11.         get { return gameObject.activeSelf; }
  12.     }
  13.  
  14.     // Use this for initialization
  15.     void Start()
  16.     {
  17.  
  18.     }
  19.  
  20.     /// <summary>
  21.     /// 显示
  22.     /// </summary>
  23.     /// <param name="parameter"></param>
  24.     public virtual void Show(object parameter = null)
  25.     {
  26.        
  27.         gameObject.SetActive(true);
  28.     }
  29.  
  30.     /// <summary>
  31.     /// 隐藏
  32.     /// </summary>
  33.     /// <param name="parameter"></param>
  34.     public virtual void Hide(object parameter = null)
  35.     {
  36.         gameObject.SetActive(false);
  37.     }
  38.  
  39.    
  40.  
  41. }

Test脚本是用来修改像素点的，ObjBase只是一个根父类，控制显示和隐藏。

测试场景用的Quad，通过读取他的mainTexture对应的像素，进行修改，UI中的话就是将一张图片转成Texture2D形式，通过读取像素点，进行修改即可，同时还可以实现同步效果。

项目中的Hierarchy窗口设置：

项目需求：使用了两个画布，MainCamera照射Quad,两个UI相机分别照射两个画布，画布的Render Mode设置为Screen Space -Camera格式。GameObject挂载脚本，Quad用来修改其上的图片的像素点。

效果图：

使用LineRenderer   3D划线方法实现2D签名效果：

先上代码：

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4. using UnityEngine.UI;
  5. using System.Text;
  6. using System.IO;
  7. using UnityEngine.EventSystems;
  8.  
  9. public class Test5 : MonoBehaviour {
  10.  
  11.     public GameObject drawObj;
  12.     private bool beginDraw;
  13.     private GameObject obj;
  14.     public Transform parent;
  15.     public RawImage rawImg;
  16.     public Camera UICam;
  17.     public Camera main;//主相机和UI相机共同照射到的地方进行截图
  18.     Color[] colors;
  19.     Texture2D myTexture2D;
  20.     public RawImage photo;
  21.  
  22.     public RawImage showImg;
  23.     [SerializeField] private string _name;
  24.  
  25.     public RectTransform canvas1;
  26.  
  27.     public void SaveFile()
  28.     {
  29.         Camera mainCam;
  30.         GameObject cam = Camera.main.gameObject;
  31.  
  32.         if (cam)
  33.         {
  34.             mainCam = cam.GetComponent<Camera>();
  35.         }
  36.         else
  37.         {
  38.             return;
  39.         }
  40.  
  41.         RenderTexture renderTex;
  42.  
  43.         renderTex = new RenderTexture(Screen.width, Screen.height, 24);
  44.         mainCam.targetTexture = renderTex;
  45.         mainCam.Render();
  46.  
  47.          myTexture2D = new Texture2D(renderTex.width, renderTex.height);
  48.         RenderTexture.active = renderTex;
  49.         myTexture2D.ReadPixels(new Rect(0, 0, renderTex.width, renderTex.height), 0, 0);
  50.         
  51.        
  52.         myTexture2D.Apply();
  53.         byte[] bytes = myTexture2D.EncodeToJPG();
  54.  
  55.         myTexture2D.Compress(true);
  56.         myTexture2D.Apply();
  57.         RenderTexture.active = null;
  58.  
  59.         File.WriteAllBytes(Application.dataPath + "/StreamingAssets/TextureTemp.png", bytes);
  60.         mainCam.targetTexture = null;
  61.         GameObject.Destroy(renderTex);
  62.     }
  63.  
  64.     public void OnClick()
  65.     {
  66.        
  67.         main.rect = new Rect(0, 0, 1, 1);
  68.        CaptureCamera( main,new Rect(Screen.width * 0f, Screen.height * 0f, Screen.width * 1f, Screen.height * 1f));
  69.  
  70.         
  71.     }
  72.  
  73.  
  74.     /// <summary>  
  75.     /// 对相机截图。   
  76.     /// </summary>  
  77.     /// <returns>The screenshot2.</returns>  
  78.     /// <param name="camera">Camera.要被截屏的相机</param>  
  79.     /// <param name="rect">Rect.截屏的区域</param>  
  80.     Texture2D CaptureCamera(Camera camera,Rect rect)
  81.     {
  82.         // 创建一个RenderTexture对象  
  83.         RenderTexture rt = new RenderTexture((int)rect.width, (int)rect.height, 0);
  84.         // 临时设置相关相机的targetTexture为rt, 并手动渲染相关相机  
  85.         camera.targetTexture = rt;
  86.         camera.Render();
  87.         //ps: --- 如果这样加上第二个相机，可以实现只截图某几个指定的相机一起看到的图像。  
  88.          //camera2.targetTexture = rt;  
  89.         // camera2.Render();  
  90.         //ps: -------------------------------------------------------------------  
  91.  
  92.         // 激活这个rt, 并从中中读取像素。  
  93.         RenderTexture.active = rt;
  94.         Texture2D screenShot = new Texture2D((int)rect.width, (int)rect.height, TextureFormat.RGB24, false);
  95.         screenShot.ReadPixels(rect, 0, 0);// 注：这个时候，它是从RenderTexture.active中读取像素  
  96.         screenShot.Apply();
  97.  
  98.         // 重置相关参数，以使用camera继续在屏幕上显示  
  99.         camera.targetTexture = null;
  100.        // camera2.targetTexture = null;
  101.         //ps: camera2.targetTexture = null;  
  102.         RenderTexture.active = null; // JC: added to avoid errors  
  103.         GameObject.Destroy(rt);
  104.         // 最后将这些纹理数据，成一个png图片文件  
  105.         byte[] bytes = screenShot.EncodeToPNG();
  106.         string filename = Application.dataPath + string.Format("/Screenshot_{0}.png", _name);
  107.         System.IO.File.WriteAllBytes(filename, bytes);
  108.         Debug.Log(string.Format("截屏了一张照片: {0}", filename));
  109.         showImg.texture = screenShot;
  110.         main.rect = new Rect(0.25f, 0.35f, 0.5f, 0.5f);
  111.         return screenShot;
  112.     }
  113.    
  114.  
  115.     void Start () {
  116.         if (Display.displays.Length > 1)
  117.             Display.displays[1].Activate();
  118.         if (Display.displays.Length > 2)
  119.             Display.displays[2].Activate();
  120.     }
  121.  
  122.  // Update is called once per frame
  123.  void Update () {
  124.         if (Input.GetMouseButtonDown(0))
  125.         {
  126.             beginDraw = true;
  127.             obj = Instantiate(drawObj) as GameObject;
  128.             obj.transform.parent = parent;
  129.         }
  130.         if (Input.GetMouseButtonUp(0))
  131.         {
  132.             beginDraw = false;
  133.         }
  134.  
  135.         if (beginDraw)
  136.         {
  137.             Vector3 position = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10f);
  138.             position = Camera.main.ScreenToWorldPoint(position);
  139.             //Vector3 localPoint;
  140.             //if(RectTransformUtility.ScreenPointToWorldPointInRectangle(canvas1, position, null, out localPoint))
  141.             //{
  142.             //    position = localPoint;
  143.             //}
  144.            
  145.  
  146.             DrawText dt = obj.GetComponent<DrawText>();
  147.             dt.points.Add(position);
  148.             dt.Draw();
  149.             dt.line.startColor = Color.yellow;
  150.             dt.line.endColor = Color.yellow;
  151.             dt.line.startWidth = 0.03f;
  152.             dt.line.endWidth = 0.03f;
  153.         }
  154.  
  155.     }
  156. }

Test5是划线和截取签名的操作，绑定在空物体上，OnClick函数绑定在按钮上

Line:制作签名预制体

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4.  
  5. public class DrawText : MonoBehaviour {
  6.  
  7.  
  8.     public List<Vector3> points = new List<Vector3>();
  9.     public  LineRenderer line;
  10.     private void Awake()
  11.     {
  12.         line = GetComponent<LineRenderer>();
  13.     }
  14.     public  void Draw()
  15.     {
  16.         line.positionCount = points.Count;
  17.         for (int i = 0; i < points.Count; i++)
  18.         {
  19.             line.SetPosition(i, points[i]);
  20.             line.startWidth =2f;
  21.             line.endWidth =2f;
  22.         }
  23.     }
  24.     // Use this for initialization
  25.     void Start () {
  26.   
  27.  }
  28.  
  29.  // Update is called once per frame
  30.  void Update () {
  31.   
  32.  }
  33. }

Draw Text脚本挂在预制体Line上，Line 添加LineRenderer组件，同时Material中加入自己创建的材质球

项目需求：Hierarchy窗口设置

和上面一种方法一样，也是两个画布，两个UI相机，同时需要一个MainCamera

parent为空物体，用来作为根节点，将签名时实时生成的预制体放在其下面，作为子节点，方便后面进行销毁，重新签名。

重点：

第二种方法使用的是特定相机照射画面进行截图，Test5中的CaptureCamera方法就是截取主相机照射到的画面。由于签名不能进行全屏进行截图，只能部分截图，类似相面的画面

下面会有一些常规的功能按钮，重新签名，保存签名等等操作，这些操作就是在UI上进行签名。

所以，通过修改MainCamera的Viewport Rect窗口来进行截图，同时能够实现正常的签名操作。

MainCamera的Viewport Rect设置：

运行刚开始：

通过设置这个属性，可以使签名界面呈现上一个图的效果，前面是UI层，后面是3D层。

然而在截屏图的时候如果始终保持Viewport Rect是上面的设置，则截图的时候仍把周围的黑色部分也截取出来，刚开始以为特定相机照射截图只截取Viewport Rect中的图像，后来测试是周围的所有黑色部分也截取了，这样就不满足要求。

所以，在代码中签字 的时候保持上面的设置，截图之前main.rect = new Rect(0, 0, 1, 1);设置成全屏，截好之后重新回复成原来的设置  main.rect = new Rect(0.25f, 0.35f, 0.5f, 0.5f);，截图完成之后将签名图片赋值给第二个屏幕画布中的RawImage进行展示。

达到效果。结合UI实际签名过程中

中间的白色部分，通过设置MainCamera中的Camera组件中的Background（设置为白色）以及天空盒（Windows->Lighting->Settings->Scene->Skybox Material设置为空），设置为需要的颜色。UI制作的时候需要签名的部分制作成透明的即可。

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

unity热门文章

  • Unity3D 计时器的实现代码(三种写法总结)
  • unity AudioSource播放完声音后要执行的函数或条件操作
  • Unity 实现给物体替换材质球
  • unity中camera摄像头控制详解
  • 欧拉角的万向节死锁问题
  • 原生实现C#与Lua相互调用方法(Unity3D可用)
  • unity 实现摄像机绕某点旋转一周
  • Unity Shader实现模糊效果
  • 基于Unity实现2D边缘检测
  • C#使用Unity实现IOC

    • unity推荐文章

  • [Unity] Dreamteck Splines实现沿路径移动功能
  • [Unity] 实现AssetBundle资源加载管理器
  • 扩展实现Unity协程的完整栈跟踪
  • iOS使用Unity容器动态加载3D模型
  • 【Unity3D】Unity与Android交互
  • Unity学习笔记--数据持久化之PlayerPrefs的使用
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
  • 【Unity3D】UI Toolkit样式选择器
  • 【Unity3D】UI Toolkit容器

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号