关于Unity实现自定义多边形图片效果

关于Unity实现自定义多边形图片效果

1.创建RawImageEditor编辑器拓展脚本(放在工程中Editor文件夹下,没有则创建)

 1 /*************************************************
 2  * 项目名称:动态更改图片显示边数
 3  * 脚本创建人:魔卡
 4  * 脚本创建时间:2018.01.27
 5  * 脚本功能:RawImageEditor编辑器功能重写
 6  * ***********************************************/
 7 using System.Collections;
 8 using System.Collections.Generic;
 9 using UnityEngine;
10 using UnityEditor;
11 using UnityEditor.UI;
12
13 [CustomEditor(typeof(UICircle), true)]
14 [CanEditMultipleObjects]
15 public class UICircleInspector : RawImageEditor
16 {
17
18     public override void OnInspectorGUI()
19     {
20         base.OnInspectorGUI();
21         UICircle circle = target as UICircle;
22         circle.segments = Mathf.Clamp(EditorGUILayout.IntField("UICircle多边形", circle.segments), 3, 360);//设置边数的最小于最大值(3-360)
23     }
24
25 }

2.创建RawImage重新绘制脚本

  1 /*************************************************
  2  * 项目名称:动态更改图片显示边数
  3  * 脚本创建人:魔卡
  4  * 脚本创建时间:2018.01.27
  5  * 脚本功能:RawImage重新绘制脚本
  6  * ***********************************************/
  7 using System;
  8 using UnityEngine;
  9 using UnityEngine.UI;
 10
 11 public class UICircle : RawImage
 12 {
 13     const int FILL_PERCENT = 100;
 14     float thickness = 5;
 15
 16     [SerializeField]
 17     [Range(3, 360)]
 18     int _segments = 36;
 19
 20     public int segments
 21     {
 22         get { return _segments; }
 23         set
 24         {
 25             if (_segments != value)
 26             {
 27                 _segments = value;
 28                 SetVerticesDirty();
 29 #if UNITY_EDITOR
 30                 UnityEditor.EditorUtility.SetDirty(transform);
 31 #endif
 32             }
 33         }
 34     }
 35
 36
 37     protected override void OnRectTransformDimensionsChange()
 38     {
 39         base.OnRectTransformDimensionsChange();
 40         this.thickness = (float)Mathf.Clamp(this.thickness, 0, rectTransform.rect.width / 2);
 41     }
 42
 43     protected override void OnPopulateMesh(VertexHelper vh)
 44     {
 45         float outer = -rectTransform.pivot.x * rectTransform.rect.width;
 46         float inner = -rectTransform.pivot.x * rectTransform.rect.width + this.thickness;
 47
 48         vh.Clear();
 49
 50         Vector2 prevX = Vector2.zero;
 51         Vector2 prevY = Vector2.zero;
 52         Vector2 uv0 = new Vector2(0, 0);
 53         Vector2 uv1 = new Vector2(0, 1);
 54         Vector2 uv2 = new Vector2(1, 1);
 55         Vector2 uv3 = new Vector2(1, 0);
 56         Vector2 pos0;
 57         Vector2 pos1;
 58         Vector2 pos2;
 59         Vector2 pos3;
 60
 61         float tw = rectTransform.rect.width;
 62         float th = rectTransform.rect.height;
 63
 64         float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
 65         float currentAngle = 0f;
 66         for (int i = 0; i < segments + 1; i++)
 67         {
 68
 69             float c = Mathf.Cos(currentAngle);
 70             float s = Mathf.Sin(currentAngle);
 71
 72             StepThroughPointsAndFill(outer, inner, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);
 73
 74             uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
 75             uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
 76             uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
 77             uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);
 78
 79             vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
 80
 81             currentAngle += angleByStep;
 82         }
 83     }
 84
 85     private void StepThroughPointsAndFill(float outer, float inner, ref Vector2 prevX, ref Vector2 prevY, out Vector2 pos0, out Vector2 pos1, out Vector2 pos2, out Vector2 pos3, float c, float s)
 86     {
 87         pos0 = prevX;
 88         pos1 = new Vector2(outer * c, outer * s);
 89
 90         pos2 = Vector2.zero;
 91         pos3 = Vector2.zero;
 92
 93         prevX = pos1;
 94         prevY = pos2;
 95     }
 96
 97     protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
 98     {
 99         UIVertex[] vbo = new UIVertex[4];
100         for (int i = 0; i < vertices.Length; i++)
101         {
102             var vert = UIVertex.simpleVert;
103             vert.color = color;
104             vert.position = vertices[i];
105             vert.uv0 = uvs[i];
106             vbo[i] = vert;
107         }
108         return vbo;
109     }
110
111 }

3.找一个Canvas下的空物体,将UICircle脚本挂载上,将所需显示的图片拖动到Texture下,根据需要更改图片边数

4.效果图如下:

      

原文地址:https://www.cnblogs.com/mrmocha/p/8367600.html

时间: 2024-10-03 04:56:04

关于Unity实现自定义多边形图片效果的相关文章

第23章 CSS边框图片效果

本章学习日后开发使用参考一下内容 https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/ 或W3C 或者百度 未排版的PDF转WORD(不想排版了) 第 23章 CSS3边框图片效果学习要点:1.属性初探2.属性解释3.简写和版本 本章主要探讨 HTML5中 CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩.一.属性解释CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样

jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片

年后换了部门,现在主要的职责就是在网上卖精油,似乎这个就是传说中的网络营销. 跟着公司的MM们也了解不了少关于网络营销的知识,间接的了解到马云和刘强东都是些怎样龌龊的人,尽管之前也这样认为. 淘宝就不多说了,全球最大的中文假货销售平台(尽管淘宝没有打出全球中文等字样,可是其必须当之无愧).百度,当当等厚颜无耻之徒的明智之举就在于此,老外做的再大也很少会有直接支持中文的,因此他们都会在其名称前增加:“全球最大的中文”等字样,为自己镶金. 之前还一直比较力挺京东的,认为其根本自营根本不会销售假货,所

Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果

首先我们先看第一个界面吧,使用将手机中的图片扫描出来,然后根据图片的所在的文件夹将其分类出来,并显示所在文件夹里面的一张图片和文件夹中图片个数,我们根据界面元素(文件夹名, 文件夹图片个数,文件夹中的一张图片)使用一个实体对象ImageBean来封装这三个属性 package com.example.imagescan; /** * GridView的每个item的数据对象 * * @author len * */ public class ImageBean{ /** * 文件夹的第一张图片路

Android自定义类似ProgressDialog效果的Dialog

Android自定义类似ProgressDialog效果的Dialog. 方法如下: 1.首先准备两张自己要定义成哪样子的效果的图片和背景图片(也可以不要背景). 如我要的效果: 2.定义loading_dialog.xml布局文件(这里你也可以按自己的布局效果定义,关键是要有个imageView): [html] view plaincopy <?xml version="1.0" encoding="utf-8"?> <LinearLayout

Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果

大家好!过完年回来到现在差不多一个月没写文章了,一是觉得不知道写哪些方面的文章,没有好的题材来写,二是因为自己的一些私事给耽误了,所以过完年的第一篇文章到现在才发表出来,2014年我还是会继续在CSDN上面更新我的博客,欢迎大家关注一下,今天这篇文章主要的是介绍下开源库StickyGridHeaders的使用,StickyGridHeaders是一个自定义GridView带sections和headers的Android库,sections就是GridView item之间的分隔,headers

【Unity技巧】LOGO闪光效果

写在前面 本文参考了风宇冲的博文,在按照这篇博文实现LOGO闪光时,发现了一些问题.最严重的就是背景无法透明,看上去背景始终是黑色的:其次就是各个变量的意义不是非常明确,调节起来不方便:而且在闪光条的角度处理上考虑不全,在角度为钝角时会有Bug. 这篇文章针对上面的问题修改了该Shader,并将各个变量作为Shader面板中的可调节变量,可视化编辑闪光效果. 代码 Shader "Custom/LogoFlash" { Properties { _MainTex ("Base

自定义圆角图片控件(Xfermode方式)

苹果都放弃自己的棱角了... 看惯了方方正正的图片,乍一看到圆角图片觉得挺漂亮的.可当满世界都是圆角图片的时候,我又开始怀念那些棱角了~之前仓促的写过一个,今天拿过来又修改了一下,现在贴在这里,以方便以后ctrl+c.ctrl+v~~~~~ 一.目标 自定义一个图片控件,有圆形和圆角两种选择.控件的行为和ImageView一致! 二.思路 扩展ImageView控件,重写其onDraw方法.一开始还想重写onMeasure方法,如果显示圆形图片强制宽高相等,没能行得通(代码中会说明).圆角图片以

第八十节,CSS3边框图片效果

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice                        

Android SeekBar自定义使用图片和颜色显示

      1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 未选中 --> <item android:id=&q