2D图片的描边

第一种 Sprite 外边框

原理是找到边缘像素,然后设置颜色,边缘像素的特点是像素的八个方向的邻像素不全是透明或者不全是不透明,这样的像素就是边缘上的像素,下面是找到的shader源码,很简单

Shader "Custom/Sprite Outline"
{Properties{_MainTex ("Sprite Texture", 2D) = "white" {}_Color ("Tint", Color) = (1,1,1,1)_OutlineThickness("Outline Thickness", Range (0.0, 0.1)) = 0.0_OutlineColor ("Outline Color", Color) = (1,1,1,1)}SubShader{Tags{ "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane""CanUseSpriteAtlas"="True"}Cull OffLighting OffZWrite OffBlend One OneMinusSrcAlphaPass{CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile _ PIXELSNAP_ON#include "UnityCG.cginc"struct appdata_t{float4 vertex   : POSITION;float4 color    : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex   : SV_POSITION;fixed4 color    : COLOR;float2 texcoord  : TEXCOORD0;};fixed4 _Color;sampler2D _MainTex;fixed4 _OutlineColor;fixed _OutlineThickness;v2f vert(appdata_t IN){v2f OUT;OUT.vertex = UnityObjectToClipPos(IN.vertex);OUT.texcoord = IN.texcoord;OUT.color = IN.color * _Color;return OUT;}fixed4 SampleSpriteTexture (float2 uv){fixed4 color = tex2D (_MainTex, uv);return color;}fixed4 frag(v2f IN) : COLOR{fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;c.rgb *= c.a;fixed4 outlineC = _OutlineColor;outlineC.rgb *= outlineC.a;//outlineC.a *= ceil(c.a);if (c.a == 0.0){fixed upAlpha = SampleSpriteTexture ( IN.texcoord + fixed2(0, _OutlineThickness)).a;fixed downAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(0, _OutlineThickness)).a;fixed rightAlpha = SampleSpriteTexture ( IN.texcoord + fixed2(_OutlineThickness, 0)).a;fixed leftAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(_OutlineThickness, 0)).a;fixed upRightAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(_OutlineThickness, _OutlineThickness)).a;fixed upLeftAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(_OutlineThickness, -_OutlineThickness)).a;fixed downRightAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(-_OutlineThickness, _OutlineThickness)).a;fixed downLeftAlpha = SampleSpriteTexture ( IN.texcoord - fixed2(-_OutlineThickness, -_OutlineThickness)).a;if (upAlpha != 0.0|| downAlpha != 0.0 || rightAlpha != 0.0 || leftAlpha != 0.0 || upRightAlpha != 0.0 || upLeftAlpha != 0.0 || downLeftAlpha != 0.0 || downRightAlpha != 0.0)return outlineC;    }return c;}ENDCG}}
}
第二种 UI图片外边框

UGUI已经开源了,特意扒了一下源码,outline组件中是通过ModifyMesh接口改变的顶点偏移,然后outline组件是继承自shadow组件,可以说是outline和shadow实现原理一样的,就是把图像进行偏移然后设置颜色,然后在渲染原图,也就是这个效果需要渲染两次,这面是顶点处理的回调函数

 public override void ModifyMesh(VertexHelper vh){if (!IsActive())return;var verts = ListPool<UIVertex>.Get();vh.GetUIVertexStream(verts);var neededCpacity = verts.Count * 5;if (verts.Capacity < neededCpacity)verts.Capacity = neededCpacity;var start = 0;var end = verts.Count;ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, effectDistance.y);start = end;end = verts.Count;ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, -effectDistance.y);start = end;end = verts.Count;ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, effectDistance.y);start = end;end = verts.Count;ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, -effectDistance.y);vh.Clear();vh.AddUIVertexTriangleStream(verts);ListPool<UIVertex>.Release(verts);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云原生_K8S系列】Kubernetes 控制器之 Deployment

在 Kubernetes 中&#xff0c;Deployment 是一种高级控制器&#xff0c;负责管理应用的部署和生命周期。它提供了一种声明性的方式来定义应用的期望状态&#xff0c;并确保实际状态与期望状态保持一致。Deployment 可以自动处理应用的滚动更新、扩展和回滚等任务&#xff0c;是…

Spring AI 第二讲 之 Chat Model API 第九节 watsonx.ai Chat

通过 watsonx.ai&#xff0c;你可以在本地运行各种大型语言模型&#xff08;LLM&#xff09;&#xff0c;并从中生成文本。Spring AI 通过 WatsonxAiChatModel 支持 watsonx.ai 文本生成。 您首先需要拥有一个 watsonx.ai 的 SaaS 实例&#xff08;以及一个 IBM 云帐户&#x…

Elasticsearch高效检索:基础查询详解

在当今大数据和云计算的时代&#xff0c;信息的快速检索和高效处理成为了企业竞争的关键。Elasticsearch&#xff0c;作为一款基于Lucene构建的开源、分布式、RESTful搜索引擎&#xff0c;以其强大的全文搜索和结构化搜索能力&#xff0c;赢得了众多开发者和企业的青睐。今天&a…

web前端复试经验:深度解析与实用指南

web前端复试经验&#xff1a;深度解析与实用指南 在Web前端开发领域的求职过程中&#xff0c;复试无疑是一个至关重要的环节。它既是对求职者技术实力的全面检验&#xff0c;也是展现个人能力与潜力的绝佳机会。本文将围绕四个方面、五个方面、六个方面和七个方面&#xff0c;…

C++STL(四)priority_queue的详细用法及仿函数实现

目录 一&#xff1a;&#x1f525;介绍二&#xff1a;&#x1f525;priority_queue 的基本操作三&#xff1a;&#x1f525;priority_queue 的原型定义四&#xff1a;&#x1f525;重写仿函数4.1.仿函数的介绍4.2.priority_queue仿函数代码示例 五&#xff1a;&#x1f525;pri…

Recognize Anything: A Strong Image Tagging Model(RAM模型使用方法)

一、RAM模型介绍 这篇论文介绍了一个名为“Recognize Anything Model”&#xff08;RAM&#xff09;的新型基础模型&#xff0c;专用于图像标签识别&#xff08;图像分类&#xff09;。这一模型采用大规模图像-文本配对数据进行训练&#xff0c;无需手动注释&#xff0c;能够在…

关于焊点检测(SJ-BIST)模块实现

关于焊点检测&#xff08;SJ-BIST&#xff09;模块实现 语言 &#xff1a;Verilg HDL 、VHDL EDA工具&#xff1a;ISE、Vivado、Quartus II 关于焊点检测&#xff08;SJ-BIST&#xff09;模块实现一、引言二、焊点检测功能的实现方法&#xff08;1&#xff09; 输入接口&#x…

数据库(28)——联合查询

对于union查询&#xff0c;就是把多次查询的结果合并起来&#xff0c;形成一个新的查询结果集。 语法 SELECT 字段列表 FROM 表A... UNION [ALL] SELECT 字段列表 FROM 表B...; 演示 select * from user where age > 22 union all select * from user where age < 50; u…

oracle linux和ubuntu的区别

Oracle Linux和Ubuntu是两种不同的Linux发行版&#xff0c;它们有一些区别&#xff1a; 背景和支持&#xff1a; Oracle Linux是由Oracle公司开发和支持的&#xff0c;它是基于Red Hat Enterprise Linux (RHEL)的一个分支。Ubuntu是由Canonical Ltd.开发和支持的&#xff0c;它…

【Python机器学习】PCA——特征提取(2)

上一篇写过了用单一最近邻分类器训练后的精度只有0.22. 现在用PCA。想要度量人脸的相似度&#xff0c;计算原始像素空间中的距离是一种相当糟糕的方法。用像素表示来比较两张图像时&#xff0c;我们比较的是每个像素的灰度值与另一张图像对应位置的像素灰度值。这种表示与人们…

Vue3 组合式 API:依赖注入(四)

provide() provide() 函数是用于依赖注入的一个关键部分。这个函数允许你在组件树中提供一个值或对象&#xff0c;使得任何子组件&#xff08;无论层级多深&#xff09;都能够通过 inject() 函数来访问这些值。 import { provide, ref } from vue; export default { setup(…

iOS Universal Links 配置

前言 Universal Links 通用链接&#xff0c;我的理解就是通过点击这个链接&#xff0c;能够打开应用&#xff0c;还可以根据配置的路径和参数跳转到App内指定页面和传递参数。我们做微信QQ登录分享时会要求配置这个链接。网上有很多文章介绍了如何配置&#xff0c;但是每次随便…

力扣经典面试题-旋转链表(Java)

1.题目描述&#xff1a;给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3] 示例 2&#xff1a; 输入&#xff1a;head [0,1,2], k …

python数据分析-连云港石化基地2023年用电量分析

接下来对连云港石化基地2023年用电量进行分析&#xff0c;首先导入数据分析基本的包&#xff1a; import pandas as pd import matplotlib.pyplot as plt# Load the data from the provided Excel files file_path1 data1.xlsx file_path2 data2.xlsxdata1 pd.read_excel(f…

设计模式之观察者模式ObserverPattern(十一)

一、概述 观察者模式 (Observer Pattern) 是一种行为型设计模式&#xff0c;又被称为发布-订阅 (Publish/Subscribe) 模式&#xff0c;它定义了对象之间的一种一对多的依赖关系&#xff0c;使得当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会自动收到通知并更新…

Leetcode 力扣109. 有序链表转换二叉搜索树 (抖音号:708231408)

给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为 平衡 二叉搜索树。 示例 1: 输入: head [-10,-3,0,5,9] 输出: [0,-3,9,-10,null,5] 解释: 一个可能的答案是[0&#xff0c;-3,9&#xff0c;-10,null,5]&#xff0c;它表示所示的高…

arm架构下torch环境的安装(主要是conda,torch,torchvision以及tensorflow)

以前装过arm架构下的深度学习环境还是有点麻烦的&#xff0c;在此记录一下 参考&#xff1a;https://blog.csdn.net/condom10010/article/details/128139401?ops_request_misc&request_id&biz_id102&utm_termorin%E5%B9%B3%E5%8F%B0%E6%9E%B6%E6%9E%84%E9%85%8D%E…

ubuntu22.04防火墙策略

1. 安装和配置UFW 1.1 安装UFW 如果UFW尚未安装&#xff0c;可以使用以下命令进行安装&#xff1a; sudo apt update sudo apt install ufw1.2 启用UFW 启用UFW并允许SSH流量&#xff0c;以防止自己被锁定在系统之外&#xff1a; sudo ufw allow OpenSSH sudo ufw enable2…

2 程序的灵魂—算法-2.2 简单算法举例-【例 2.4】

【例 2.4】求 100 1 - 1/2 - 1/3 … 1/100 算法可表示如下&#xff1a; S1: sigh1 S2: sum1 S3: deno2 S4: sigh(-1)sigh S5: term sigh(1/deno ) S6: termsumterm S7: deno deno 1 S8:若 deno≤100&#xff0c;返回 S4&#xff1b;否则&#xff0c;结束。 double sum 1.0; …

C++11 列表初始化(initializer_list),pair

1. {} 初始化 C98 中&#xff0c;允许使用 {} 对数组进行初始化。 int arr[3] { 0, 1, 2 };C11 扩大了 {} 初始化 的使用范围&#xff0c;使其可用于所有内置类型和自定义类型。 struct Date {int _year;int _month;int _day;Date(int year, int month, int day):_year(year…