绘制画布

479次阅读
没有评论

共计 4563 个字符,预计需要花费 12 分钟才能阅读完成。

绘制画布

概述

绘制画布对象提供了一个绘图表面,您可以在上面使用一些绘图动作绘制自己的内容。这包括基本几何形状,如矩形、线条、多边形和椭圆,以及将其他对象粘贴到画布上的能力。

脚本

在使用 JavaScript 或 TypeScript 编码时,可以通过 IDrawingCanvasInstance 脚本接口访问此对象的功能。

颜色

绘图命令或像素的颜色,例如填充矩形的颜色,通常使用 rgba 系统表达式指定。这指定了颜色的红色、绿色、蓝色和 alpha 分量,范围在 0 -100 之间。rgba255 表达式相同,但使用 0 -255 的尺度,艺术家可能更熟悉。还可以使用 rgbEx 和 rgbEx255 表达式,但不提供 alpha 参数,因此会表现得好像 alpha 完全不透明。

处理分辨率和缩放

绘制画布对象有两种方式处理画布的分辨率,每种都有自己的优点和缺点。

自动分辨率模式

默认情况下,画布使用自动分辨率模式,该模式使用与游戏相同的显示分辨率。但是显示分辨率通常会在窗口调整大小时更改。例如,在信箱缩放模式下,当窗口调整得更大时,游戏以更大的尺寸(使用更多像素)显示相同的内容。当您调整对象本身的大小时,也会发生类似的情况。绘制画布对象会在发生这种情况时自动更改其画布的分辨率。这是破坏性的:下一次绘制到画布时会清除它,因为内部绘图表面被销毁并在新分辨率下重新创建。这种方法的优势是确保绘制的内容将以高质量显示,因为调整大小或缩放会增加分辨率,而不是拉伸较低分辨率的图像。

固定分辨率模式

另一个选项是使用固定分辨率。这默认使用对象的尺寸作为绘图表面的大小(即,如果在布局中对象为 100×100,则绘图表面也将为 100×100 像素)。使用 Set resolution mode 操作还可以将绘图表面设置为不同的大小。

固定分辨率模式将使绘图表面保持相同的分辨率,无论对象大小、窗口大小或比例如何。换句话说,它将始终使用相同大小的表面并仅拉伸以适应显示。这样做的好处是即使显示分辨率发生变化,也能保留绘制的内容。然而,一个潜在的缺点是,由于它不会随着分辨率的增加而提高质量,在某些情况下可能会显得模糊或像素化。

坐标系统

绘制画布对象允许您在特定位置绘制形状和线条。在自动分辨率模式下,它使用相对于布局坐标的对象的坐标系。例如,如果对象在布局中的大小为 100×100,那么点 (50, 50) 总是位于画布的中心,无论分辨率如何。这意味着您不需要根据画布的分辨率更改绘图坐标:所有内容都会自动缩放,因此如果用户将窗口调整得更大,内容会自动增加细节。

快照系统

计算机图形的工作方式使得即使是检索单个像素的颜色也是一个非常昂贵的操作。渲染过程高度优化为单向:从 CPU 发送绘图命令,在 GPU 上渲染,然后在用户的屏幕上显示结果。将像素的颜色返回给 CPU 会走相反的方向,如果系统必须等待结果,它会完全阻塞渲染过程,几乎肯定会卡顿帧率。

为了避免性能陷阱同时允许访问单个像素,绘制画布对象使用快照系统,其工作原理如下:

  • Save snapshot 操作复制 GPU 上的整个画布图像。
  • 然后异步(并行)将复制的图像发送回 CPU。在此期间渲染可以继续进行。
  • 当 CPU 上可用复制的图像时,触发 On snapshot。现在可以使用快照表达式(例如 SnapshotRedAt(x, y))读取像素数据。
  • 如果需要更改像素数据,可以使用 Set snapshot pixel 操作进行修改。这只更改 CPU 可用的副本,并不会明显影响画布。要使更改可见,请使用 Load snapshot 操作,将快照复制回画布。

Noise textures 示例演示了如何执行此操作,编写由 Advanced Random 对象生成的随机像素数据。

画布属性设置

分辨率模式

选择如何处理实际绘图表面的分辨率。更多信息请参阅上述关于处理大小调整和分辨率的部分。

初始可见性

对象在运行时是否最初可见。

原点

选择对象原点相对于其框的位置。

抗锯齿

为更好的绘图质量启用多重采样抗锯齿(MSAA)。例如,通常多边形和线的边缘会是硬边缘(" 参差不齐 ")。启用抗锯齿可以提高边缘的质量(使其“更柔和”),但会使渲染变慢并使用更多内存。更高级别的抗锯齿进一步降低性能。此选项需要 WebGL 2+,并非所有设备都支持所有级别的抗锯齿。例如,如果你选择 8x MSAA 但特定设备只支持 4x MSAA,它将回退到 4x MSAA。
如果启用了抗锯齿,Paste 对象操作无法在启用效果的情况下绘制,如果对象使用了任何背景混合效果,例如 Screen。这是因为 WebGL 内部不支持直接从抗锯齿表面读取。如果你需要粘贴带有背景混合效果的对象,请关闭抗锯齿。

画布条件

分辨率更改时

当画布的显示分辨率发生变化时触发,例如由于在 Letterbox 缩放模式下调整窗口大小。如果你在此触发中向画布绘图,这意味着画布图像将自动缩放到显示分辨率。如果你不在此触发中向画布绘图,它只会将旧图像拉伸到新的大小。

保存图片后

在保存图片操作后触发,当保存的图片准备好时。可以使用 SavedImageURL 表达式访问图像,例如使用浏览器对象的 Invoke download 操作下载它。

快照后

在保存快照操作后触发,当快照准备好时。这允许读取和写入快照图像中的单个像素,例如使用 SnapshotRedAt 表达式。有关更多信息,请参阅上述关于使用快照进行像素操作的部分。

画布 – 画布操作

这组操作通常与整个画布图像相关。

设置分辨率模式

在绘图表面的自动或固定分辨率模式之间切换,或更改固定分辨率画布的大小。请注意,如果画布分辨率发生变化,包括通过更改固定分辨率画布的大小,表面将被销毁并重新创建,导致之前绘制的内容消失。

清除快照

释放使用保存快照操作保存的快照,节省用于存储它的内存。这将状态返回到好像根本没有拍摄快照一样。此操作后尝试检索快照像素的任何表达式将返回 0。

加载快照

将内存中的快照复制回画布,以便对其像素数据的任何更改在对象中可见。快照必须与画布的分辨率匹配 – 如果分辨率已更改,则无法加载快照。请注意,这仍将快照留在内存中 – 如果不再需要快照,请使用清除快照操作将其删除以节省内存。

保存图片

以适合用户下载的压缩格式(PNG 或 JPEG)保存当前画布图像。可以通过指定 X、Y、宽度和高度参数(全部以设备像素为单位)来保存画布区域的子集(例如保存裁剪后的图像)。SurfaceDeviceWidth 和 SurfaceDeviceHeight 表达式给出画布在设备像素中的大小。默认值(将所有值保留为零)将保存整个画布区域。此操作在准备好后触发 On saved image,并将 SavedImageURL 表达式设置为可以下载的 URL。

保存快照

复制当前画布图像以使其像素数据可用。准备好后触发 On snapshot。有关更多信息,请参阅上述关于使用快照进行像素操作的部分。

设置快照像素

设置保存的快照中的一个像素的颜色。必须事先拍摄快照并触发 On snapshot。与其他绘图命令不同,这采用像素坐标的位置。使用 rgba 表达式将像素颜色设置为给定的红色、绿色、蓝色和 alpha 组件。请注意,直到使用加载快照操作,更改才会可见。

绘制画布 – 通用操作

此组操作提供了一般绘图功能,如填充矩形和绘制线条。绘制多边形涉及更多操作,因此被单独分出一组。

清除画布

将整个画布清除为一种颜色。这将覆盖所有现有图像内容。例如,清除为透明色将使整个画布变为透明,这与绘制一个透明的矩形不同,后者不会产生任何可见的差异。

清除矩形

与清除画布相同,但仅清除画布上的一个矩形区域。

线条

虚线

在画布上两个点之间绘制一条线,指定线的颜色和粗细。线帽指定线的末端是恰好位于起点和终点(Butt),还是稍微超出起点和终点的方形(Square)。虚线变体还允许指定破折号长度,这会在线条颜色和透明度之间交替,产生虚线效果。

填充椭圆

轮廓椭圆

在画布上绘制一个填充或轮廓的椭圆形状。形状使用中心点和 X、Y 轴上的半径指定。如果两轴上的半径相同,则形状将为圆形。轮廓变体还指定轮廓的粗细。边缘还可以设置为 Hard(适用于像素化游戏)或 Smooth(质量更高的软边外观)。

填充线性渐变

用从一种颜色到另一种颜色的线性渐变填充画布上的矩形区域。渐变方向可以是水平或垂直。

渐变使用伽马校正计算,可能与其他使用伽马不正确计算的工具(通过在 sRGB 空间中线性插值)看起来不同。

填充矩形

轮廓矩形

在画布上绘制一个填充或轮廓的矩形形状。轮廓变体还指定轮廓的粗细。

粘贴对象

将所有重叠画布的给定对象的实例以其当前位置绘制到画布上。默认情况下,对象绘制得完全如其所示,考虑到添加到它们的任何效果;无效果绘制就像禁用了对象的所有效果一样。

实际绘制发生在 tick 结束时。此操作是异步的,因此可以与 System Wait for previous actions to complete 操作一起使用,以确保粘贴已完成。注意,如果在不等待完成的情况下立即销毁对象,它将不会被绘制,因为它会在绘制之前被销毁。

设置绘图混合

设置除粘贴对象外所有绘图操作使用的背景混合模式(粘贴对象采用被粘贴对象的混合模式)。选项与对象可以使用的混合模式相匹配,但应用于绘制到画布上,而不是显示 Drawing Canvas 对象本身。两个有用的选项是设置“复制”混合模式并以透明度绘制以清除区域,或使用“目标之外”来擦除内容。

绘制画布 – 多边形操作

此组操作允许绘制多边形形状。多次使用 Add poly point 添加点。然后可以绘制轮廓或填充的多边形。使用 Reset poly 清除已添加的点并重新开始。

添加多边形点

向当前多边形添加一个新点。在绘制多边形之前必须至少添加三个点。

轮廓多边形

虚线轮廓多边形

在当前多边形的点之间绘制虚线,回到起点。参数与线条和虚线操作类似。

填充多边形

用颜色填充当前多边形区域。这支持凸多边形和凹多边形。然而,凹多边形在内部转换为多个凸多边形。由于几何计算中的浮点精度问题,此过程有时会失败,导致渲染出现故障。如果你知道要渲染的形状是凸的,请检查 Convex 参数,这将绕过内部转换;但是,如果多边形实际上是凹的,这将不会正确渲染。

注意,不支持自相交多边形,它们将无法正确绘制。

重置多边形

清除所有已添加的多边形点,以便下一个 Add poly point 操作开始新的多边形。

绘制画布表达式

PixelScale

单个画布像素在对象坐标中的大小。有关更多信息,请参阅上面的坐标系统部分。

SavedImageURL

在保存图像时,已保存图像的 URL。可以使用 Browser 对象的 Invoke download 操作下载。

SnapshotRedAt(x, y)

SnapshotGreenAt(x, y)

SnapshotBlueAt(x, y)

SnapshotAlphaAt(x, y)

返回保存快照中像素的红色、绿色、蓝色和 alpha 分量。位置以像素坐标给出,返回值在 0 -100 范围内。有关更多信息,请参阅上面的使用快照进行像素操作部分。

SnapshotWidth

SnapshotHeight

返回保存快照的像素大小。有关更多信息,请参阅上面的使用快照进行像素操作部分。

SurfaceDeviceWidth

SurfaceDeviceHeight

返回画布表面在设备像素中的当前大小。当定义 Save image 操作中使用的子集区域时,这些非常有用。

正文完
 0
评论(没有评论)