从零开始的UnityUI学习--Canvas[画布]

最新推荐文章于 2024-07-27 10:35:41 发布

冰红茶加威士忌

最新推荐文章于 2024-07-27 10:35:41 发布

阅读量2.3k

点赞数

分类专栏： Unity 文章标签： Canvas UnityUI

本文链接：https://blog.csdn.net/Dionysuss/article/details/72621432

版权

Unity 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas[画布]是一个控制一组被渲染UI元素的组件，所有UI元素必须是Canvas的子物体

同一场景允许存在多个Canvas，但使用UI元素必须有一个可用的Canvas组件

每个Canvas都有可选的Render Modes(渲染模式)

Screen Space-Overlay UI会覆盖整个场景，也随着场景视图的大小变化而变化，所有的UI元素会在场景最上层渲染输出

在该模式下Canvas会影响Rect Transform，使其填充整个屏幕而不可编辑

Pixel Perfect UI元素渲染输出时，会自动吸附到最近的像素点

Screen Space-Camera 由场景中指定的摄像机渲染输出，Canvas会自动填充相机输出视图，

通过设置摄像机的ClearFlag、CullingMask、Depth属性使Canvas及其内容与场景中其他Canvas区分隔离开

Render Camera 设置指定的摄像机

Pixel Perfect UI元素渲染输出时，会自动吸附到最近的像素点

Plane Distance UI会被移至相机的视椎体中，使用调整与相机的距离

World Space Canvas不再影响Rect Transform，其可位于任意位置

Event Camera 用于确定哪个摄像里来检测如点击事件等操作

Receives Event 设置这个Canvas中的UI元素是否接收事件如悬停、点击

Sorting Layer、Order in Layer 用于控制场景中Canvas 之间的渲染顺序

渲染顺序自顶向下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冰红茶加威士忌

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Unity零基础到入门 ☀️| 【UI系统学习】轻松学会 Unity 的 UGUI基础控件的使用（包括一个简易血条、蓝条设计）

努力前行，总会成为自己心中的那道光

05-31

2万+

Unity，UGUI。本篇博客来挑几种Unity中最常用的UI控件如何使用和使用技巧，包括一个简易血条蓝条的小实例

Unity_UI学习（UGUI）

枫玥gy的博客

07-17

3344

目录 01.Canvas对象和EventSystem对象 02.Canvas组件 03.RectTransform组件 04.Image组件 05.Button组件 06.Text组件 07.ScrollRect组件、Mask组件 01.Canvas对象和EventSystem对象 Canvas对象所有游戏节目里的UI元素（纹理、图像、按钮、滑动条等）都必须位于Canv...

参与评论您还未登录，请先登录后发表或查看评论

unity UI学习记录

qq_27647347的博客

05-16

468

最近学习了一下UI，趁没忘记记一下要点。 canvas三种模式，1.screen space-overlay 2 screen space-camera 3 world space overlay优先级最高，内部以在hierarchy中的上下顺序排序，越靠后优先级越高，可以理解为越后面刷油漆，覆盖前面。 camera模式，不同摄像机的depth优先级不同，depth越大，越后刷油

Unity Canvas动画：UI元素的动态展示

热门推荐

努力前行，总会成为自己心中的那道光

05-24

2万+

轻松学会 Unity 的 UGUI基础控件使用 Unity中的UI介绍 UI即User Interface（用户界面）的简称。泛指用户的操作界面，UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。据我所知Unity中有两种自带的UI，一种是UGUI，一种是GUI Legacy GUI：旧版 UI，只有两个组件：文字和图片，配合鼠标事件来

创新高性能移动UI框架-CanvasUI框架

01-30

最近有人在知乎讨论ReactNative，我也凑个热闹，来个技术贴。WebView里无法获得的能力虽然是「体验增强」与「端基本能力」，但现都基本上有成熟解决方法。但后期的 UI和Layout的性能反而是目前Web技术欠缺的。所以，无论是Titanium与React Native都是解决性能作为探索的出发点。慢与快的标准，是按照每秒大于等于60FPS（60帧每秒）的理论，而为什么是60FPS，这不多描述。按此理论，那么「每帧」里所有的操作都必须在1

CanvasUI:仅使用js呈现UI。刚开发中

05-14

CanvasUI 仅使用javascript渲染UI 这是什么？用于创建跨平台SPA的解决方案。 API的设计类似于iOS UIKit 。基于画布工作。（比普通H5快）以ES6样式创建的源代码（使用babel）。尚不应该在发布产品中使用。（正在开发中）如何运行？运行grunt 运行npm start 在浏览器中打开http://localhost:8080 添加您的代码打开main/RootView在此处添加一些代码 API样式以_开头的属性是私有的，否则是公共的。＃＃＃特征支持retina 支持ImageView 支持Label 支持alpha 支持clipToBounds 支持shadow ， boarder 支持autoResizingMask 支持mouse或touch事件支持Button 支持animation ###将

Zebkit基于HTML5Canvas的UI框架

08-10

遵循简单OOP概念的JavaScript库，提供基于HTML5 Canvas的Rich UI并包含Java to JavaScript转换工具

unity 创建画布自动适应屏幕

m0_67150972的博客

06-22

1110

创建物体画布（Canvas）Canvas渲染模式为屏幕空间摄像机，将摄像机拖动到渲染摄像机Canvas Scaler UI缩放模式设置屏幕大小缩放参考分辨率手机平板通用分辨率： (X:1080,Y:1920) 屏幕匹配模式 Expand......

Unity UICanvas

LCHUIHUI的博客

01-19

261

CanvasScaler scaler = UICanvas.transform.GetComponent<CanvasScaler>(); scaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight; float ratio = (scaler.referenceResolution.x / scaler.referenceResolution.y) / (Sc...

【Unity基础】ugui画布篇(个人学习)

qq_41094072的博客

09-25

2109

ui是必学的东西，这里主要学习ugui canvas 知识参考:https://docs.unity3d.com/cn/2021.3/Manual/提前说明，这是个人学习笔记，不是教程。

高级UI-画板Canvas

weixin_30718391的博客

04-06

240

Canvas可以用来绘制直线、点、几何图形、曲线、Bitmap、圆弧等等，做出很多很棒的效果，例如QQ的消息气泡就是使用Canvas画的 Canvas中常用的方法初始化参数 Paint paint = new Paint(); paint.setColor(Color.RED); paint.setStyle(Paint.Style.FILL)...

Canvas 画布 UI系列1

cangod的博客

01-10

1635

Canvas 画布本文档主要是对Unity官方手册的个人理解与总结（其实以翻译记录为主：>）仅作为个人学习使用，不得作为商业用途，欢迎转载，并请注明出处。文章中涉及到的操作都是基于Unity2018.3版本参考链接：https://docs.unity3d.com/Manual/UICanvas.html The Canvas is the area that all UI elem...

wxml-to-canvas用法

09-02

wxml-to-canvas 是一个小程序开发工具，用于将 WXML（微信小程序的界面描述语言）转换为 Canvas（小程序中绘制图形的 API）。它可以让开发者在小程序中使用更丰富的图形效果和动画。使用 wxml-to-canvas 的步骤如下： 1. 在小程序的项目目录中安装 wxml-to-canvas 插件。可以通过 npm 或 yarn 进行安装： ```shell npm install --save wxml-to-canvas ``` 2. 在需要使用 wxml-to-canvas 的页面或组件中引入插件： ```javascript const wx2canvas = require('wxml-to-canvas'); ``` 3. 创建一个画板对象，指定宽度和高度： ```javascript const canvas = wx2canvas.createCanvas(300, 200); ``` 4. 将 wxml 转换为 Canvas 绘制指令，可以通过调用 `canvas.draw` 方法来实现： ```javascript canvas.draw(wxml, options); ``` 其中，`wxml` 是要转换的 WXML 代码，`options` 是可选参数，用于指定一些绘制的配置，如字体样式、文字颜色等。 5. 获取 Canvas 的绘制结果，可以通过调用 `canvas.toDataURL` 方法将 Canvas 转换为图片数据： ```javascript const imageData = canvas.toDataURL(); ``` 还可以通过 `canvas.toTempFilePath` 方法将 Canvas 保存为临时文件路径，方便后续使用。以上就是 wxml-to-canvas 的简单使用方法。希望对你有帮助！如有更多问题，请继续提问。