高光描边雷达图

本文介绍了如何在Unity中使用PolygonImage组件创建可调整顶点数的雷达图,包括设置纹理、边缘权重和图形渲染逻辑。详细展示了如何控制图形的形状和渐变效果。

一、话不多说,上效果图

二、雷达图属性概览

通过调整weights数量改变雷达图顶点数

三、雷达图材料

1、代码

using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;
using UnityEditor.UI;
using UnityEditor;

public class PolygonImage : MaskableGraphic, ISerializationCallbackReceiver, ICanvasRaycastFilter
{
    [SerializeField]
    Texture m_Texture;

    public PolygonImageEdge edgeWeights;

    public override Texture mainTexture
    {
        get
        {
            if (m_Texture == null)
            {
                if (material != null && material.mainTexture != null)
                {
                    return material.mainTexture;
                }
                return s_WhiteTexture;
            }

            return m_Texture;
        }
    }

    /// <summary>
    /// Texture to be used.
    /// </summary>
    public Texture texture
    {
        get
        {
            return m_Texture;
        }
        set
        {
            if (m_Texture == value)
                return;

            m_Texture = value;
            SetVerticesDirty();
            SetMaterialDirty();
        }
    }

    public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
    {
        if (raycastTarget)
        {
            Vector2 local;
            RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, sp, eventCamera, out local);

            int edgeCount = edgeWeights.EdgeCount;

            float deltaAngle = 360f / edgeCount;

            for (int i = 0; i < edgeCount; i++)
            {
                bool result = IsInPolygon(i, deltaAngle, local);
                if (result)
                    return true;
            }
        }
        return false;
    }

    public virtual void OnAfterDeserialize()
    {

    }

    public virtual void OnBeforeSerialize()
    {

    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (edgeWeights == null || edgeWeights.EdgeCount <= 2)
        {
            base.OnPopulateMesh(vh);
            return;
        }
        int edgeCount = edgeWeights.EdgeCount;

        float deltaAngle = 360f / edgeCount;

        vh.Clear();

        for (int i = 0; i < edgeCount; i++)
        {
            GetTriangle(vh, i, deltaAngle);
        }
    }

    private void GetTriangle(VertexHelper vh, int index, float deltaAngle)
    {
        float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height) * 0.5f;
        var color32 = color;
        Vector3 cent = new Vector3(0, 0);
        float angle1 = 90 + (index + 1) * deltaAngle;
        float angle2 = 90 + (index) * deltaAngle;
        float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1]) * edgeLength;
        float radius2 = edgeWeights.Weights[index] * edgeLength;

        Vector3 p1 = new Vector3(radius1 * Mathf.Cos(angle1 * Mathf.Deg2Rad), radius1 * Mathf.Sin(angle1 * Mathf.Deg2Rad));
        Vector3 p2 = new Vector3(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));

        vh.AddVert(cent, color32, Vector2.zero);
        vh.AddVert(p1, color32, new Vector2(0, 1));
        vh.AddVert(p2, color32, new Vector2(1, 0));

        vh.AddTriangle(index * 3, index * 3 + 1, index * 3 + 2);
    }

    private bool IsInPolygon(int index, float deltaAngle, Vector2 point)
    {
        float edgeLength = Mathf.Min(rectTransform.rect.width, rectTransform.rect.height) * 0.5f;
        Vector2 cent = new Vector2(0, 0);
        float angle1 = 90 + (index + 1) * deltaAngle;
        float angle2 = 90 + (index) * deltaAngle;
        float radius1 = (index == edgeWeights.EdgeCount - 1 ? edgeWeights.Weights[0] : edgeWeights.Weights[index + 1]) * edgeLength;
        float radius2 = edgeWeights.Weights[index] * edgeLength;

        Vector2 p1 = new Vector2(radius1 * Mathf.Cos(angle1 * Mathf.Deg2Rad), radius1 * Mathf.Sin(angle1 * Mathf.Deg2Rad));
        Vector2 p2 = new Vector2(radius2 * Mathf.Cos(angle2 * Mathf.Deg2Rad), radius2 * Mathf.Sin(angle2 * Mathf.Deg2Rad));

        return IsInTriangle(cent, p1, p2, point);
    }

    private bool IsInTriangle(Vector2 vertex1, Vector2 vertex2, Vector2 vertex3, Vector2 point)
    {
        Vector2 v0 = vertex3 - vertex1;
        Vector2 v1 = vertex2 - vertex1;
        Vector2 v2 = point - vertex1;

        float dot00 = Vector2.Dot(v0, v0);
        float dot01 = Vector2.Dot(v0, v1);
        float dot02 = Vector2.Dot(v0, v2);
        float dot11 = Vector2.Dot(v1, v1);
        float dot12 = Vector2.Dot(v1, v2);

        float inverDeno = 1 / (dot00 * dot11 - dot01 * dot01);

        float u = (dot11 * dot02 - dot01 * dot12) * inverDeno;
        if (u < 0 || u > 1)
        {
            return false;
        }

        float v = (dot00 * dot12 - dot01 * dot02) * inverDeno;
        if (v < 0 || v > 1)
        {
            return false;
        }

        return u + v <= 1;
    }
}
[System.Serializable]
public class PolygonImageEdge
{
    public int EdgeCount
    {
        get
        {
            if (m_Weights == null)
                return 0;
            return m_Weights.Count;
        }
    }

    public List<float> Weights
    {
        get { return m_Weights; }
    }

    [SerializeField] 
    private List<float> m_Weights;
}
[CustomEditor(typeof(PolygonImage))]
[CanEditMultipleObjects]
public class PolygonImageEditor : GraphicEditor
{

    private SerializedProperty m_Texture;
    private SerializedProperty m_EdgeWeights;

    protected override void OnEnable()
    {
        base.OnEnable();
        m_Texture = serializedObject.FindProperty("m_Texture");
        m_EdgeWeights = serializedObject.FindProperty("edgeWeights");
    }
    public override void OnInspectorGUI()
    {
        serializedObject.Update();

        EditorGUILayout.PropertyField(m_Texture);
        EditorGUILayout.PropertyField(m_Color);
        EditorGUILayout.PropertyField(m_Material);
        EditorGUILayout.PropertyField(m_RaycastTarget);
        EditorGUILayout.PropertyField(m_EdgeWeights);

        serializedObject.ApplyModifiedProperties();
    }
}

2、一张巧妙的三角形图片

三要素:三角形、直角边无描边、渐变色

### Unity 中实现描边效果的方法 在 Unity 中通过 Shader 和 Post-Processing 技术可以实现高质量的描边效果。以下是具体的实现方式: #### 使用 ShaderGraph 创建描边效果 可以通过 Unity 的 Shader Graph 工具来创建一种基于边缘检测算法的描边效果[^1]。这种技术的核心在于利用 Sobel 边缘检测算子或其他类似的像处理方法,识别物体轮廓并绘制线条。 ```csharp // C# 示例代码用于设置材质参数 public class OutlinePostProcess : MonoBehaviour { public Material outlineMaterial; void OnRenderImage(RenderTexture source, RenderTexture destination) { Graphics.Blit(source, destination, outlineMaterial); } } ``` 上述脚本会将自定义的 Shader 材料应用到整个屏幕渲染上,从而实现全局范围内的描边效果[^2]。 #### 配置 Post-Processing Stack 为了使描边效果更加灵活可控,推荐结合 Unity 的 Post Processing Stack 组件一起使用。这允许开发者调整模糊程度、颜色强度以及抗锯齿等功能。 ```json { "postProcessLayer": { "effects": [ {"type": "OutlineEffect", "settings": { "edgeThickness": 0.5f, "color": [0, 0, 0, 1]} } ] } } ``` 此 JSON 数据片段展示了如何配置一个简单的后处理层以支持特定类型的框增强功能。 #### 自定义着色器编写 (HLSL/CG) 如果需要更精细控制,则可以直接编辑 HLSL 或 CG 程序代码,在像素级别操作纹理数据完成复杂视觉表现形式的设计工作。 ```hlsl float4 frag(v2f i) : SV_Target { float3 normal = UnpackNormal(tex2D(_BumpMap, i.uv)); fixed4 col = tex2D(_MainTex, i.uv); half edge = DetectEdge(normal); // 假设我们有一个函数用来计算边界值 return lerp(col, _OutlineColor * step(edge,_Threshold),_Intensity); } ``` 以上 HLSL 片段演示了一个基本框架,其中包含了法线贴解码过程以及最终色彩混合逻辑。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值