unity new UI : GUI.DrawTexture 等效ScaleAndCrop
Unity new UI : GUI.DrawTexture ScaleAndCrop equivalent
我想用 Unity (2D) 实现一个图片库。我有一个 Canvas
逻辑上分成正方形,比如说,100x100 单位。那么:
- 每个 "square" 由从动态下载的图像填充
互联网(使用 www class);
- 图像不一定是正方形:在这种情况下,我想“缩放和裁剪图像”:保留纵横比并且图像填充整个正方形;
- 当用户点击一个正方形时,图像会在
屏幕中间。再次单击图像返回到
正方形 size/position;
- 每隔一段时间,取一个正方形
随机且其图像被新图像替换。
我是 Unity 的新手,我已经尝试过很多不同的方法。我真正的问题是规模和作物。确实:
Gui.DrawTexture()
接受一个参数 scaleMode.ScaleAndCrop
,这正是我所需要的。但这是旧 UI 系统的一部分...
- 新的 UI 提供
Image
和 RawImage
Gui 组件,但开箱即用,我们可以保持纵横比或填充正方形,但不能两者兼而有之。
- 我试图通过将一个正方形像素复制到一个新纹理中来创建一个 "texture thumbnail"。它可以工作,但缩略图和全尺寸图像之间的动画不再可能...
我确信有一种方法可以使用新的 UI 功能 和 获得缩放和裁剪效果,但我不知道如何使用。有人可以给我一些建议吗?
您将需要使用图像组件缩放游戏对象,并使用遮罩组件。
我会这样做:
使用 GridLayoutGroup 创建 canvas,这将根据需要组织缩略图图像(3 行 3 列等)。
每个图像都有一个带有遮罩的父游戏对象,将使用 GridLayoutGroup 进行设置。面具之子将是一个图像,您将在其中显示下载的内容。
在您选择的控制器中引用每个图像组件。
image1 是对第一个缩略图的引用;
下载图像后,将其制作的 Sprite 分配给 image1.sprite。
调用image1.SetNativeSize();
检查 fimage1.GetComponent().sizeDelta(这是宽度和高度)并根据图像大小缩放 image1,同时考虑使其适合蒙版边框。您基本上需要一些数学小算法。
image1 也有带有附加 OnClick 事件的 Button 组件,可以触发假设 "ShowImagePressed (Image img)"。参数是 image1 的图像。
触发此处理程序时,通过 image1.transform.parent.GetComponent().enabled = false 禁用遮罩,并缩放图像 1,将其移至中心。
实现自动缩放和裁剪行为的最简单方法是向包含图像的游戏对象添加 AspectRatioFitter。将 AspectMode 设置为 Envelope Parent。这样 Unity 将填充并在需要时与父对象重叠,请参阅 Unity Documentation:
Envelope Parent: The width, height, position, and anchors are automatically adjusted to make the rect cover the entire area of the parent while keeping the aspect ratio. This rect may extend further out than the parent rect.
然后您可以向父对象添加遮罩以隐藏不需要的叠加层(不要忘记同时添加空图像,否则遮罩将不起作用)。您可能需要在脚本中处理的唯一一件事就是找到正确的图像纵横比。
我想用 Unity (2D) 实现一个图片库。我有一个 Canvas
逻辑上分成正方形,比如说,100x100 单位。那么:
- 每个 "square" 由从动态下载的图像填充 互联网(使用 www class);
- 图像不一定是正方形:在这种情况下,我想“缩放和裁剪图像”:保留纵横比并且图像填充整个正方形;
- 当用户点击一个正方形时,图像会在 屏幕中间。再次单击图像返回到 正方形 size/position;
- 每隔一段时间,取一个正方形 随机且其图像被新图像替换。
我是 Unity 的新手,我已经尝试过很多不同的方法。我真正的问题是规模和作物。确实:
Gui.DrawTexture()
接受一个参数scaleMode.ScaleAndCrop
,这正是我所需要的。但这是旧 UI 系统的一部分...- 新的 UI 提供
Image
和RawImage
Gui 组件,但开箱即用,我们可以保持纵横比或填充正方形,但不能两者兼而有之。 - 我试图通过将一个正方形像素复制到一个新纹理中来创建一个 "texture thumbnail"。它可以工作,但缩略图和全尺寸图像之间的动画不再可能...
我确信有一种方法可以使用新的 UI 功能 和 获得缩放和裁剪效果,但我不知道如何使用。有人可以给我一些建议吗?
您将需要使用图像组件缩放游戏对象,并使用遮罩组件。
我会这样做:
使用 GridLayoutGroup 创建 canvas,这将根据需要组织缩略图图像(3 行 3 列等)。
每个图像都有一个带有遮罩的父游戏对象,将使用 GridLayoutGroup 进行设置。面具之子将是一个图像,您将在其中显示下载的内容。
在您选择的控制器中引用每个图像组件。
image1 是对第一个缩略图的引用;
下载图像后,将其制作的 Sprite 分配给 image1.sprite。
调用image1.SetNativeSize();
检查 fimage1.GetComponent
image1 也有带有附加 OnClick 事件的 Button 组件,可以触发假设 "ShowImagePressed (Image img)"。参数是 image1 的图像。
触发此处理程序时,通过 image1.transform.parent.GetComponent
实现自动缩放和裁剪行为的最简单方法是向包含图像的游戏对象添加 AspectRatioFitter。将 AspectMode 设置为 Envelope Parent。这样 Unity 将填充并在需要时与父对象重叠,请参阅 Unity Documentation:
Envelope Parent: The width, height, position, and anchors are automatically adjusted to make the rect cover the entire area of the parent while keeping the aspect ratio. This rect may extend further out than the parent rect.
然后您可以向父对象添加遮罩以隐藏不需要的叠加层(不要忘记同时添加空图像,否则遮罩将不起作用)。您可能需要在脚本中处理的唯一一件事就是找到正确的图像纵横比。