RUI Studio 帮助

绘图栅格化

形状右键栅格化成 PNG;可选描边、投影、发光;从底层裁剪用形状当遮罩。

把矢量形状(矩形、圆角、圆、椭圆、三角、弧、线等)变成 PNG 静态图。特效在电脑上烤好,屏端只贴图,运行时不再算矢量。

放置图元与控件 画形状,再按下面做。

怎么栅格化

  1. 选中一个或多个可栅格化的形状。
  2. 右键 → 栅格化。输出固定为 PNG(没有格式对话框)。
  3. 形状变成图片图元,宽高与 PNG 像素一致。之后当普通图改位置、再打包。

未填充的框线会和下方画面融在一起再出图。已填充且出 PNG 时,四角透明还在。

未注册时,较宽的图右下角可能有 Power by RUI

栅格化效果

属性里 栅格化效果 一排按钮,可叠加(与 Photoshop 图层样式类似),设计预览和落盘同一套:

效果大致用途
描边沿轮廓加边
投影落到形状外面的影子
内阴影形状内侧的影子
渐变叠加面上铺渐变
光泽缎面高光
内发光从内侧往里亮
外发光轮廓外一圈光

先调效果,看设计区满意再 右键栅格化。只调效果不栅格化,屏端还是矢量/未烤的图,下位机对不齐预览。

屏上圆角发糊、发阶梯

设计区是高精度预览。打包进 FLASH 时 PNG 会再编码

  • 工程 16bpp(常见默认):半透明圆角、外发光容易出现阶梯。
  • 工程 24bpp:更接近预览,图资更大。

实机四角不满意:参数里把色深改成 24bpp,再 重新栅格化 → 打包 → 烧录

从底层裁剪

用形状当 遮罩,只留下形状里、并且排在它 下面 的画面,生成一张带透明边的 PNG。底图和形状本身都 不删、不改,多出一张新图。

适合:圆角窗口、圆形头像、不规则开窗——底下是照片或整页底图,上面盖一个矩形/圆/椭圆/三角/弧当刀口。

怎么裁

  1. 先放好底层内容(填充画布、图片、其它图元),再在上面画遮罩形状,对齐要留下的区域。
  2. 选中遮罩(矩形、圆角矩形、圆、椭圆、三角、弧)。线不能当遮罩。
  3. 右键 → 从底层裁剪。形状锁定时菜单是灰的。
  4. 成功后画布多一张 PNG,位置对齐遮罩外接框。执行列表里动作名是「裁剪位图」。
  5. 不需要原来的形状时,再自己删或藏;底图要不要留着,也由你决定。

多选几个形状、或形状已 组合:按 并集 一起裁。只裁当前页、Z 序比遮罩组 最低一层还低、并且和外接框相交的内容。填充画布算底层。触摸区、线条不进这张图。

形状下方没有可裁内容时,会提示「形状下方没有可裁剪的内容」——把图放到形状下面,或先把形状 上移一层

和「栅格化」的差别

从底层裁剪栅格化
目的按外形抠底下的图把形状自己烤成图(可加描边/发光)
结果新增一张 PNG形状 换成 一张 PNG
底下的图原样留下不负责抠图

先裁出开窗图,再对这张图做 图像调整 也可以。