rcn-nodes —— RCN 节点类型与字段全表(自动生成)
这张表直接来自编辑器的字段定义:属性面板里能看到的每一个旋钮就是这里的一行,「说明」列就是面板里的提示。写法与规则见
numable docs rcn;不在本表里的字段写了会被丢弃(例如没有bold,加粗只能选带 Bold 的typeface)。
节点类型
| type | 用途 | 专属字段 |
|---|---|---|
layer |
图层 | color |
txt |
文本 | text textColor fontSize typeface alignmentH alignmentV maxLines lineSpacing lineBreak |
img |
图片 | url urlHeaders scaleType |
arc |
扇形 | color lineWidth startAngle sweepAngle useCenter |
line |
折线 | color coverageColor lineWidth points |
curves |
曲线 | color coverageColor lineWidth points |
path |
路径 | d viewBox lineWidth scaleType fillRule lineCap lineJoin fillColor strokeColor clipPath mask |
richText |
富文本 | textColor fontSize typeface alignmentH alignmentV maxLines lineSpacing lineBreak spans |
group |
组合 | (只有通用字段) |
op |
逻辑节点 | action props |
通用字段(所有节点)
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
id |
ID | 布局 | 字符串 | 这个节点在本画布里的名字,不要和别的重名。别的节点想贴着它摆位置(写 {这个名字.r})就靠它来找 |
x |
X | 布局 | 数值,单位 pt |
离父节点左边多远。也可以贴着别的节点摆:{别的节点ID.r}+8 = 排在它右边、留 8 的空 |
y |
Y | 布局 | 数值,单位 pt |
离父节点顶边多远。也可以贴着别的节点摆:{别的节点ID.b}+8 = 排在它下面、留 8 的空 |
w |
宽 | 布局 | 数值,单位 pt;特殊值 -1=自适应 |
宽度。选「自适应」= 按内容自动撑开(文字多宽就多宽) |
h |
高 | 布局 | 数值,单位 pt;特殊值 -1=自适应 |
高度。选「自适应」= 按内容自动撑开(文字几行就多高) |
events.onClick |
点击 · onClick | 数据 | 导航串或流绑定 | 点一下这块内容发生什么:跳到某个页面 / 打开链接,或者跑一条动作流 |
events.onLongPress |
长按 · onLongPress | 数据 | 导航串或流绑定 | 手指按住不放发生什么,常用来弹出一张菜单 |
click |
点击事件(旧字段,events 优先) | 数据 | 导航串或流绑定 | 旧字段形式的点击事件,只在上面的 onClick 没填时才顶用。新做的内容一律填上面那个 |
maxWidth |
最大宽 | 布局 | 数值,单位 pt |
宽度设成「自适应」时,最多能撑到多宽。给会变长的文字(标题、金额)兜个底,免得把组件顶破 |
maxHeight |
最大高 | 布局 | 数值,单位 pt |
高度设成「自适应」时,最多能撑到多高 |
paddingLeft |
内边距左 | 布局 | 数值,单位 pt |
里面的内容离本节点左边留多少空 |
paddingTop |
内边距上 | 布局 | 数值,单位 pt |
里面的内容离本节点顶边留多少空 |
paddingRight |
内边距右 | 布局 | 数值,单位 pt |
里面的内容离本节点右边留多少空 |
paddingBottom |
内边距下 | 布局 | 数值,单位 pt |
里面的内容离本节点底边留多少空 |
hide |
隐藏 | 布局 | 枚举 0 / 1 / 2 |
藏不藏这块内容。「隐藏保留布局」= 看不见但位置还占着,周围的节点不会挪;「隐藏且不占位」= 位置一并让出来,后面的内容会补上去。常配合 ${} 做「有数据才显示」 |
zIndex |
层级 | 布局 | 字符串 | 叠放的前后次序,数字大的盖在数字小的上面。不填就按节点在左侧列表里的先后顺序叠 |
bgColor |
背景 Paint | 样式 | 颜色 Paint(浅\ | 深) |
bgUrl |
背景图 URL | 样式 | 字符串 | 背景图地址。可以写 ${} 从数据里取,也可以选包内的图片资源 |
bgUrlHeaders |
背景图 Headers JSON | 样式 | JSON | 取这张背景图时额外带的请求头,写成 {"名字":"值"}。只有图放在要鉴权的服务器上才需要 |
borderColor |
边框 Paint | 样式 | 颜色 Paint(浅\ | 深) |
borderWidth |
边框宽 | 样式 | 数值,单位 pt |
边框线的粗细。只填粗细不填颜色是看不见的 |
cornerRadius |
圆角 | 样式 | 四角对象 {leftT,leftB,rightT,rightB}(写成字符串整个组件渲染失败) |
四个角的圆角大小,可以四角统一,也可以逐角分别设。想让里面的图片也跟着变圆,要同时打开下面的「裁切子节点」 |
shadowColor |
阴影颜色 | 样式 | 颜色 Paint(浅\ | 深) |
shadowRadius |
阴影模糊 | 样式 | 数值,单位 pt |
投影的虚化程度,越大越散越柔。填 0 就是一块硬边色块 |
shadowDx |
阴影 X | 样式 | 数值,单位 pt |
投影往右偏多少,负数往左。和下面的 Y 一起决定光从哪边打过来 |
shadowDy |
阴影 Y | 样式 | 数值,单位 pt |
投影往下偏多少,负数往上 |
alpha |
透明度 | 样式 | 字符串 | 整体不透明度:0 = 完全透明,1 = 完全不透明。里面的子节点会一起变淡 |
blendMode |
混合模式 | 样式 | 枚举 source-over / multiply / screen / overlay / darken / lighten / pluslighter |
这块颜色怎么和它下面的内容混在一起。一般保持「默认」(直接盖上去);multiply 常用来叠深色阴影,screen / lighter 用来提亮 |
rotate |
旋转 | 样式 | 字符串 | 旋转多少度,正数顺时针。默认绕本节点中心转;要换个支点,在「高级」里填锚点 X / Y |
clip |
裁切子节点 | 样式 | 布尔(写 "1"/"0") | 超出本节点范围的子内容要不要切掉。做圆角头像、圆角封面时必须打开,否则图片会露出方角 |
translateX |
平移 X | 高级 | 数值,单位 pt |
在排好版的位置基础上,再往右挪多少(负数往左)。用来做微调,不影响别的节点的位置 |
translateY |
平移 Y | 高级 | 数值,单位 pt |
在排好版的位置基础上,再往下挪多少(负数往上) |
scaleX |
缩放 X | 高级 | 字符串 | 横向放大倍数:1 = 原样,1.2 = 拉宽两成,0.5 = 压扁一半 |
scaleY |
缩放 Y | 高级 | 字符串 | 纵向放大倍数:1 = 原样。想整体等比放大就和上面填一样的值 |
pivotX |
锚点 X | 高级 | 数值,单位 pt |
旋转和缩放围绕哪个点进行(横向),从本节点左上角量起。不填就是节点中心(填 -1 也回中心) |
pivotY |
锚点 Y | 高级 | 数值,单位 pt |
旋转和缩放围绕哪个点进行(纵向),从本节点顶边量起。不填就是节点中心(填 -1 也回中心) |
layer 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
color |
填充 Paint | 内容 | 颜色 Paint(浅\ | 深) |
txt 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
text |
文本 | 内容 | 字符串 | 要显示的文字。写 ${} 就能取到数据里的值,比如 ${item.title};也可以混着写:今日 ${count} 条 |
textColor |
文本 Paint | 内容 | 颜色 Paint(浅\ | 深) |
fontSize |
字号 | 内容 | 数值,单位 pt |
字有多大。单位是 pt(和系统字号一个口径),别写 px |
typeface |
字体 | 内容 | 枚举 OpenSans / OpenSans-Bold / NotoSansSC / NotoSansSC-Bold / DancingScript / DancingScript-Bold / Inter / Inter-Bold / Roboto / Roboto-Bold / DMSans / DMSans-Bold / Manrope / Manrope-Bold / Poppins / Poppins-Bold / SpaceGrotesk / SpaceGrotesk-Bold / BebasNeue / BebasNeue-Bold / Lora / Lora-Bold / SourceSerif4 / SourceSerif4-Bold / PlayfairDisplay / PlayfairDisplay-Bold / JetBrainsMono / JetBrainsMono-Bold / RobotoMono / RobotoMono-Bold / IBMPlexMono / IBMPlexMono-Bold / System / System-Bold |
用哪一款字体。⚠️ 想让字变粗就在这里选带 Bold 的那一档 —— 没有单独的「加粗」开关 |
alignmentH |
横向对齐 | 内容 | 枚举 0 / 1 / 2 |
文字在这块范围里靠左 / 居中 / 靠右。节点比文字宽时才看得出区别 |
alignmentV |
纵向对齐 | 内容 | 枚举 0 / 1 / 2 |
文字在这块范围里靠上 / 居中 / 靠下。节点比文字高时才看得出区别 |
maxLines |
最大行数 | 内容 | 字符串 | 最多显示几行,再多就不显示了。填 1 = 强制单行。给会变长的文案兜底,免得把组件撑破 |
lineSpacing |
行距 | 内容 | 数值,单位 pt |
多行文字时,行与行之间额外留多少空。正文一般 2~6 |
lineBreak |
文字折行 | 内容 | 布尔(写 "1"/"0") | 打开 = 文字太长时折到下一行;关掉 = 只排一行,超出的直接切掉。⚠️ 它还是省略号开关,而且「没填」和「填 0」是两回事:显式填 0 再配上「最大行数」,超出部分末尾才会补「…」;这个字段留空不填的节点,超长时照样折行、但不补点。填 1 = 折行且不补点。另:只要填了「最大行数」,这里填 0 也仍会折行——它管的是补不补「…」,不是绝对不换行。自动宽(宽度填 -1)的节点会撑到内容宽、不截断,因此也没有「…」 |
img 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
url |
图片 URL | 内容 | 字符串 | 图片地址。可以选包内的图片资源,也可以写 ${} 从数据里取(比如接口返回的封面图) |
urlHeaders |
图片 Headers JSON | 内容 | JSON | 取这张图时额外带的请求头,写成 {"名字":"值"}。只有图放在要鉴权的服务器上才需要 |
scaleType |
缩放 | 内容 | 枚举 fitXY / fitCenter / fitStart / fitEnd / centerCrop |
图片和这块范围尺寸不一样时怎么放:fitXY 拉伸填满(会变形)· fitCenter 完整装进去、居中留白(不变形)· fitStart / fitEnd 完整装进去、靠前 / 靠后对齐 · centerCrop 填满并裁掉多余部分(不变形,头像和封面常用) |
arc 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
color |
画笔 Paint | 内容 | 颜色 Paint(浅\ | 深) |
lineWidth |
线宽 | 内容 | 数值,单位 pt |
弧线的粗细。做环形进度条时,这就是圆环的厚度 |
startAngle |
起始角 | 内容 | 字符串 | 从哪个角度开始画。0 度在右侧(3 点钟方向),角度顺时针增加 —— 想从正上方(12 点)开始就填 -90 |
sweepAngle |
扫过角 | 内容 | 字符串 | 一共画多少度。360 是整圆;做进度环就写 ${进度百分比}*3.6 |
useCenter |
闭合成扇形 | 内容 | 布尔(写 "1"/"0") | 打开 = 两端连到圆心,画出一块饼图那样的扇形;关掉 = 只画一段弧线(进度环用这个) |
line 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
color |
画笔 Paint | 内容 | 颜色 Paint(浅\ | 深) |
coverageColor |
面积 Paint | 内容 | 颜色 Paint(浅\ | 深) |
lineWidth |
线宽 | 内容 | 数值,单位 pt |
线的粗细。走势图一般 1~2 |
points |
点集 | 内容 | 字符串 | 折线经过的点,按 x,y,x,y… 依次成对给出(相对本节点左上角)。⚠️ 坐标要在取数那一层先算好、再用 ${} 整个取过来,别在这里堆计算式 |
curves 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
color |
画笔 Paint | 内容 | 颜色 Paint(浅\ | 深) |
coverageColor |
面积 Paint | 内容 | 颜色 Paint(浅\ | 深) |
lineWidth |
线宽 | 内容 | 数值,单位 pt |
线的粗细。走势图一般 1~2 |
points |
点集 | 内容 | 字符串 | 折线经过的点,按 x,y,x,y… 依次成对给出(相对本节点左上角)。⚠️ 坐标要在取数那一层先算好、再用 ${} 整个取过来,别在这里堆计算式 |
path 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
d |
Path d | 内容 | 字符串 | 图形轮廓,就是 SVG 里那串路径数据(M/L/C/Z…)。一般从导出的 SVG 文件里把 d 那一串复制过来 |
viewBox |
viewBox | 内容 | 字符串 | 上面那串路径是画在多大的画布上的,写「0 0 24 24」这种四个数。⚠️ 从 SVG 复制路径时一定要把它一起抄过来,否则图形会大小不对或跑出边界 |
lineWidth |
线宽 | 内容 | 数值,单位 pt |
描边的粗细。只填粗细不填「描边 Paint」是看不见的 |
scaleType |
缩放 | 内容 | 枚举 fitXY / fitCenter / fitStart / fitEnd / centerCrop |
图形和这块范围尺寸不一样时怎么放:fitXY 拉伸填满(会变形)· fitCenter 完整装进去、居中留白(图标用这个)· fitStart / fitEnd 靠前 / 靠后对齐 · centerCrop 填满并裁掉多余部分 |
fillRule |
填充规则 | 内容 | 枚举 nonzero / evenodd |
图形自己套着自己时,里面那圈算实心还是镂空。默认 nonzero(基本都填实);想要甜甜圈那样中间挖空就选 evenodd |
lineCap |
线帽 | 内容 | 枚举 round / butt / square |
线两端长什么样:round 圆头(进度条常用)· butt 齐平切断 · square 方头并多伸出半个线宽 |
lineJoin |
拐角 | 内容 | 枚举 round / miter / bevel |
线拐弯的地方长什么样:round 圆角 · miter 尖角 · bevel 切平的斜角 |
fillColor |
填充 Paint | 内容 | 颜色 Paint(浅\ | 深) |
strokeColor |
描边 Paint | 内容 | 颜色 Paint(浅\ | 深) |
clipPath |
ClipPath JSON | 高级 | JSON | 用另一个形状把本节点裁出形状来(裁到形状之外的部分不显示)。做异形头像、斜切的色块用 |
mask |
Mask JSON | 高级 | JSON | 用另一个形状当遮罩,按它的浓淡决定本节点哪里显示、哪里淡出。做渐隐边缘用 |
richText 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
textColor |
文本 Paint | 内容 | 颜色 Paint(浅\ | 深) |
fontSize |
字号 | 内容 | 数值,单位 pt |
字有多大。单位是 pt(和系统字号一个口径),别写 px |
typeface |
字体 | 内容 | 枚举 OpenSans / OpenSans-Bold / NotoSansSC / NotoSansSC-Bold / DancingScript / DancingScript-Bold / Inter / Inter-Bold / Roboto / Roboto-Bold / DMSans / DMSans-Bold / Manrope / Manrope-Bold / Poppins / Poppins-Bold / SpaceGrotesk / SpaceGrotesk-Bold / BebasNeue / BebasNeue-Bold / Lora / Lora-Bold / SourceSerif4 / SourceSerif4-Bold / PlayfairDisplay / PlayfairDisplay-Bold / JetBrainsMono / JetBrainsMono-Bold / RobotoMono / RobotoMono-Bold / IBMPlexMono / IBMPlexMono-Bold / System / System-Bold |
用哪一款字体。⚠️ 想让字变粗就在这里选带 Bold 的那一档 —— 没有单独的「加粗」开关 |
alignmentH |
横向对齐 | 内容 | 枚举 0 / 1 / 2 |
文字在这块范围里靠左 / 居中 / 靠右。节点比文字宽时才看得出区别 |
alignmentV |
纵向对齐 | 内容 | 枚举 0 / 1 / 2 |
文字在这块范围里靠上 / 居中 / 靠下。节点比文字高时才看得出区别 |
maxLines |
最大行数 | 内容 | 字符串 | 最多显示几行,再多就不显示了。填 1 = 强制单行。给会变长的文案兜底,免得把组件撑破 |
lineSpacing |
行距 | 内容 | 数值,单位 pt |
多行文字时,行与行之间额外留多少空。正文一般 2~6 |
lineBreak |
文字折行 | 内容 | 布尔(写 "1"/"0") | 打开 = 文字太长时折到下一行;关掉 = 只排一行,超出的直接切掉。⚠️ 它还是省略号开关,而且「没填」和「填 0」是两回事:显式填 0 再配上「最大行数」,超出部分末尾才会补「…」;这个字段留空不填的节点,超长时照样折行、但不补点。填 1 = 折行且不补点。另:只要填了「最大行数」,这里填 0 也仍会折行——它管的是补不补「…」,不是绝对不换行。自动宽(宽度填 -1)的节点会撑到内容宽、不截断,因此也没有「…」 |
spans |
Spans JSON | 内容 | JSON | 分段文字:一句话里几段用不同颜色 / 字号 / 粗细(比如「涨了 +2.3%」把数字标红)。每段写一个对象,按顺序拼成整句 |
op 专属字段
| 字段 | 名称 | 分组 | 类型 / 取值 | 说明 |
|---|---|---|---|---|
action |
动作 | 数据 | 枚举 for / forEach / if / set / remove / include |
这个逻辑节点干什么:forEach 把一个数组循环渲染成多份 · for 按次数循环 · if 条件成立才渲染 · set 定义一个变量给后面用 · remove 条件成立就丢掉 · include 引入另一份画布 |
props |
Props JSON | 数据 | JSON | 上面这个动作的参数,写成 {"名字":"值"}。比如 forEach 要 items(循环哪个数组)和 key(每项叫什么名字);if 要 cond(条件) |