Giter Site home page Giter Site logo

虚幻引擎 UI about blog HOT 3 OPEN

WangShuXian6 avatar WangShuXian6 commented on May 26, 2024
虚幻引擎 UI

from blog.

Comments (3)

WangShuXian6 avatar WangShuXian6 commented on May 26, 2024

创建圆角按钮

创建按钮边框材质 M_BorderCommon

材质域-用户界面
混合模式-translucent 半透明

image

RadialGradientExponential

BPGraphScreenshot_2024Y-02M-29D-18h-15m-12s-440_00

image

Density 控制边缘模糊程度
Radius 控制圆角

基于 M_BorderCommon 创建材质实例 MI_BorderCommon

image

image

CommonBorder 控件使用 MI_BorderCommon 材质

图像-MI_BorderCommon
绘制为-盒体
边缘-0.5
图像大小-32 ,32 越大则圆形越明显。
image
image

image

M_BorderCommon 更加通用的材质

不使用UV和定位
image

from blog.

WangShuXian6 avatar WangShuXian6 commented on May 26, 2024

圆角按钮 不使用材质

Common Border 通过边框控件设置

image

固定圆角

Common Border 控件
绘制为-圆形盒体
轮廓设置-舍入类型-半高半径
不能修改圆角
image
image

自定义圆角

Common Border 控件

左上,右下角

绘制为-圆形盒体
轮廓设置-舍入类型-固定半径
轮廓设置-圆角半径-16,0,16,0
image

四角

绘制为-圆形盒体
轮廓设置-舍入类型-固定半径
轮廓设置-圆角半径-16,16,16,16
image

带边框

绘制为-圆形盒体
轮廓设置-舍入类型-固定半径
轮廓设置-圆角半径-16,16,16,16

轮廓设置-轮廓-0,0,0,1 不透明度为1 显示轮廓
可以自定义边框颜色

轮廓设置-宽度-2
image

不透明度

着色-A-0.5
image

button 通过按钮控件设置

image

2圆角

样式-普通-绘制为-圆形盒体
轮廓设置-舍入类型-固定半径
轮廓设置-圆角半径-16,0,16,0
轮廓设置-宽度-1
image

全圆角

样式-普通-绘制为-圆形盒体
轮廓设置-舍入类型-固定半径
轮廓设置-圆角半径-16,16,16,16
轮廓设置-宽度-1
image

固定圆角

样式-普通-绘制为-圆形盒体
轮廓设置-舍入类型-半高半径
轮廓设置-圆角半径-16,16,16,16
轮廓设置-宽度-1

主要用来创建正圆
image

尺寸-16,16 与半径相等
image

from blog.

WangShuXian6 avatar WangShuXian6 commented on May 26, 2024

圆角按钮 使用材质

创建材质 M_BorderSample,材质实例 MI_BorderSample

材质域-用户界面
混合模式-translucent 半透明

RadialGradientExponential

image

image

Common Border 通过边框控件设置

笔刷-MI_BorderSample
笔刷-绘制为-盒体
笔刷-边缘-0.5
笔刷-图像大小-32,32

image

from blog.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.