跳至主要内容

几何与高阶用法 | Mingcedar Studio

Move 和 Scale 按有效输入范围映射位移或缩放因子;Rotate 直接使用角度值。配置时分别确认数据类型、范围、方向和组件几何。

Move / Rotate / Scale几何映射组件尺寸示例文档修订:2026-10-21
几何

使用前说明

Move 和 Scale 按有效输入范围映射位移或缩放因子;Rotate 直接使用角度值。配置时分别确认数据类型、范围、方向和组件几何。

几何 输入与输出的对应关系

Move 和 Scale 使用 Limit minimum / Limit maximum 作为实际归一化范围。Rotate 的 Rotation input 直接返回角度,不执行百分比换算。

几何 先分清哪三类动作

Move 调整组件整体位置;Rotate 调整旋转角度;Scale 调整一个方向上的尺寸。根据需要表达的设备位置、角度或填充比例选择对应行为。

几何 阅读重点

位移配置优先阅读 Move 部分;旋转中心优先阅读 Rotate 部分;固定边和增长方向优先阅读 Scale 部分。

Move

Move:先定输入范围,再定输出位移

Move 最适合做单轴位移,例如滑块、液位块、进度指示块、行程位置和水平或垂直移动对象。

Move 关键字段说明

Source value 是当前数值。Source minimum / Source maximum 提供 ValueMin / ValueMax 别名;Limit minimum / Limit maximum 决定实际归一化范围。MOVEMENT OUTPUT 中的 At limit minimum / At limit maximum 为端点位移;Move axis 选择水平或垂直方向。

  • 先确认输入值可能落在哪个区间
  • 再确认 0% 和 100% 分别对应移动距离
  • 最后确定方向是 Horizontal 还是 Vertical
移动一个组件宽度或高度

在 MOVEMENT OUTPUT 的 At limit maximum 中填写 shape.width 或 shape.height,使最大位移等于组件原始宽度或高度。向左或向上移动时使用负值。

  • 水平移动一个宽度:shape.width
  • 垂直移动一个高度:shape.height
  • At limit minimum 通常填 0
At limit minimum: 0
At limit maximum: shape.width
Move axis: Horizontal
移动两个组件宽度

At limit maximum 填 shape.width * 2,可在有效输入范围上限处向右移动两个组件宽度。垂直位移使用 shape.height * 2。

  • 向右:shape.width * 2
  • 向左:-shape.width * 2
  • 向下:shape.height * 2
  • 向上:-shape.height * 2
At limit minimum: 0
At limit maximum: shape.width * 2
Move axis: Horizontal
负方向与比例位移

位移字段支持数值表达式,例如 -shape.width、shape.width * 0.5 或 shape.height * 1.5。结果单位为画布距离,应与移动轴保持一致。

模板变量参与表达式的判断规则

模板占位符只替换字符串。数值字段用 Number('<LIMIT>') 并校验有限值;布尔参数明确比较字符串。不要使用未加引号的 <变量>。

  • 字符串值:'<TITLE>' 或 "<TITLE>"
  • 数值参数:Number('<LIMIT>')
  • 布尔参数:'<ENABLED>' === 'true'
  • 普通表达式:shape.width * 2
  • 不要把模板字符串直接作为数值结果
输入超限与显示规则

Hide outside input limits 在超出 Limit minimum / Limit maximum 时隐藏组件;未启用则夹取到端点。工艺超限用 Range Color 或 Script Color,Override border by quality 仅表示数据质量。

Move 几何行为
Move 行为

Move 的核心是把输入区间映射成位移区间,而不是手写一个固定像素偏移。

Rotate

Rotate:旋转中心与角度配置

Rotate 根据角度值绕指定支点旋转组件,适用于指针、阀门和方向指示。应同时确认角度单位和机械旋转中心。

Rotation input 与 Maximum angle

Rotation input 返回以度为单位的当前角度。Maximum angle 的绝对值定义允许范围:例如 90 对应 -90° 到 +90°。若数据源是百分比,应在 Rotation input 中显式换算为角度。

按机械中心选择支点

PIVOT POINT 提供 Center、Top、Bottom、Left、Right。支点应与实际转轴重合;底端固定的指针可选 Bottom,左侧铰接部件可选 Left。

Top / Bottom / Left / Right 的配置场景

当真实机械中心不在对象几何中心时,就不要默认 Center。比如指针底部固定、末端摆动,就更适合 Bottom;门板左侧铰接,就更适合 Left。

旋转超限处理

Hide outside angle range 控制超出允许角度时是否隐藏;未启用时角度限制在边界。工艺超限提示应使用独立颜色行为,质量边框仅表示数据质量。

Rotate 几何行为
Rotate 行为

Rotate 里最值得仔细思考的通常不是角度本身,而是 Pivot。

Scale

Scale:变化边与缩放范围

Scale 最适合液位、进度条、增长条、充满效果和强调类大小变化。它不是简单把对象放大,而是有一个固定边和一个变化边。

SCALE OUTPUT 的端点比例

At limit minimum / At limit maximum 为有效输入范围两端的缩放因子。0.5 表示原尺寸的一半,1 表示原尺寸,1.5 表示原尺寸的 1.5 倍。

Moving edge 指定移动边

Moving edge 选择随缩放移动的边,对边保持固定。液位填充向上增长应选 Top,使底边固定;向右增长的进度条应选 Right,使左边固定。

  • Top:顶边移动、底边固定
  • Bottom:底边移动、顶边固定
  • Left:左边移动、右边固定
  • Right:右边移动、左边固定
Scale 与 Move 的选择边界

表达“长度变长或变短”时,优先用 Scale;表达“整个对象在页面上平移”时,优先用 Move。很多页面表达不清,是因为本应缩放的对象被配置成平移,或本应平移的对象被配置成缩放。

使用 Capture 记录目标比例

选择 Moving edge 后,在 PowerPoint 中仅拖动该边到目标尺寸,再点击端点旁的 Capture。编辑器计算比例并尝试恢复原始几何;不要平移整个组件来模拟缩放目标。

Scale 几何行为
Scale 行为

Scale 的关键不是“变大变小”,而是“哪一边固定、哪一边变化”。

高级

几何表达式与页面脚本的边界

当前 Move、Rotate、Scale 编辑器没有 Setup Script(旧配置名 Definition)或 Post Operations 配置区。几何输入直接使用表达式;复用函数放在 Page Script。

同步数值表达式

Source value、Rotation input 和各端点字段必须同步返回数值。可以直接调用 ReadTagDouble,或调用当前页 Page Script 中定义的换算函数。

共享计算放 Page Script

同页复用的名称、量程和换算函数放 Page Script。函数若需要实时值,应在行为每次求值时调用读取方法;页面初始化时读取一次不会自动更新。

内部计算结果不作为页面变量

ValueMin、ValueMax 等几何字段别名只在对应求值上下文内使用。其他组件需要相同的结果时,应复用 Page Script 函数,不依赖另一条行为的局部变量。

附加显示逻辑的配置入口

文本、颜色和可见性使用相应行为。需要由用户操作调整布局时,可在 Click Script 中调用 setComponentLayout;避免同一组件的布局同时被脚本和几何行为反复覆盖。

脚本

脚本方式改布局:直接调用 hqVisuDesigner.setComponentLayout()

如果目标位置或目标尺寸已经明确,且这种变化难以通过固定几何行为表达,可以使用脚本直接调整布局。

脚本布局的优先场景

当布局变化依赖多个输入、多个模板值或复杂条件组合时,脚本通常比堆叠大量几何参数更清晰。联动多个对象一起变化时,hqVisuDesigner.setComponentLayout() 会更直接。

适合什么高阶场景

拖动结果回写、对象成组平移、根据用户输入重新布置面板、根据模板值动态调整弹窗位置,这些都适合脚本方式。

最简单的脚本布局例子

此 Click Script 使用 getComponentData 的 left / top 读取源位置,用 setComponentLayout 的 x / y 设置位置。每次移至源位置右侧两个宽度处,不累计位移。

// Click Script
var data = hqVisuDesigner.getComponentData("GatePositionIndicator");
if (data) {
  hqVisuDesigner.setComponentLayout("GatePositionIndicator", {
    x: data.left + data.width * 2,
    y: data.top,
    angle: data.rotation || 0
  });
}
范围动画与几何映射
范围映射

几何行为将输入范围映射到位移、角度或缩放范围;超出这些映射规则的布局需求可使用脚本。

再次点击图片或按 Esc 关闭