所属产品: Mingcedar Studio DESIGNER

几何与高阶用法 | Mingcedar Studio

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

首次发布 2026-10-25T12:48:42.579091628Z 最近更新 2026-10-25T12:48:42.579090857Z

<section id="preface" class="docs-block docs-block-intro"> <span class="section-kicker">几何</span> <h2>使用前说明</h2> <p>Move 和 Scale 按有效输入范围映射位移或缩放因子；Rotate 直接使用角度值。配置时分别确认数据类型、范围、方向和组件几何。</p> <div class="docs-task-grid"> <article id="preface-item-1" class="docs-task-card"> <span>几何</span> <strong>输入与输出的对应关系</strong> <p>Move 和 Scale 使用 Limit minimum / Limit maximum 作为实际归一化范围。Rotate 的 Rotation input 直接返回角度，不执行百分比换算。</p> </article><article id="preface-item-2" class="docs-task-card"> <span>几何</span> <strong>先分清哪三类动作</strong> <p>Move 调整组件整体位置；Rotate 调整旋转角度；Scale 调整一个方向上的尺寸。根据需要表达的设备位置、角度或填充比例选择对应行为。</p> </article><article id="preface-item-3" class="docs-task-card"> <span>几何</span> <strong>阅读重点</strong> <p>位移配置优先阅读 Move 部分；旋转中心优先阅读 Rotate 部分；固定边和增长方向优先阅读 Scale 部分。</p> </article> </div> </section> <section id="move-core" class="docs-block"> <span class="section-kicker">Move</span> <h2>Move：先定输入范围，再定输出位移</h2> <p>Move 最适合做单轴位移，例如滑块、液位块、进度指示块、行程位置和水平或垂直移动对象。</p> <div class="docs-detail-list"> <article id="move-core-item-1" class="docs-detail-row"> <strong>Move 关键字段说明</strong> <p>Source value 是当前数值。Source minimum / Source maximum 提供 ValueMin / ValueMax 别名；Limit minimum / Limit maximum 决定实际归一化范围。MOVEMENT OUTPUT 中的 At limit minimum / At limit maximum 为端点位移；Move axis 选择水平或垂直方向。</p> <ul> <li>先确认输入值可能落在哪个区间</li><li>再确认 0% 和 100% 分别对应移动距离</li><li>最后确定方向是 Horizontal 还是 Vertical</li> </ul> </article><article id="move-core-item-2" class="docs-detail-row"> <strong>移动一个组件宽度或高度</strong> <p>在 MOVEMENT OUTPUT 的 At limit maximum 中填写 shape.width 或 shape.height，使最大位移等于组件原始宽度或高度。向左或向上移动时使用负值。</p> <ul> <li>水平移动一个宽度：shape.width</li><li>垂直移动一个高度：shape.height</li><li>At limit minimum 通常填 0</li> </ul> <pre class="docs-code-block"><code>At limit minimum: 0

At limit maximum: shape.width

Move axis: Horizontal</code></pre> </article><article id="move-core-item-3" class="docs-detail-row"> <strong>移动两个组件宽度</strong> <p>At limit maximum 填 shape.width * 2，可在有效输入范围上限处向右移动两个组件宽度。垂直位移使用 shape.height * 2。</p> <ul> <li>向右：shape.width * 2</li><li>向左：-shape.width * 2</li><li>向下：shape.height * 2</li><li>向上：-shape.height * 2</li> </ul> <pre class="docs-code-block"><code>At limit minimum: 0

At limit maximum: shape.width * 2

Move axis: Horizontal</code></pre> </article><article id="move-core-item-4" class="docs-detail-row"> <strong>负方向与比例位移</strong> <p>位移字段支持数值表达式，例如 -shape.width、shape.width * 0.5 或 shape.height * 1.5。结果单位为画布距离，应与移动轴保持一致。</p> </article><article id="move-core-item-5" class="docs-detail-row"> <strong>模板变量参与表达式的判断规则</strong> <p>模板占位符只替换字符串。数值字段用 Number('<LIMIT>') 并校验有限值；布尔参数明确比较字符串。不要使用未加引号的 <变量>。</p> <ul> <li>字符串值：'<TITLE>' 或 "<TITLE>"</li><li>数值参数：Number('<LIMIT>')</li><li>布尔参数：'<ENABLED>' === 'true'</li><li>普通表达式：shape.width * 2</li><li>不要把模板字符串直接作为数值结果</li> </ul> </article><article id="move-core-item-6" class="docs-detail-row"> <strong>输入超限与显示规则</strong> <p>Hide outside input limits 在超出 Limit minimum / Limit maximum 时隐藏组件；未启用则夹取到端点。工艺超限用 Range Color 或 Script Color，Override border by quality 仅表示数据质量。</p> </article> </div> <div class="docs-note-grid"> <figure id="move-core-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormPosition.png" alt="Move 几何行为" loading="lazy" decoding="async"> <figcaption> <strong>Move 行为</strong> <p>Move 的核心是把输入区间映射成位移区间，而不是手写一个固定像素偏移。</p> </figcaption> </figure> </div> </section><section id="rotate-core" class="docs-block"> <span class="section-kicker">Rotate</span> <h2>Rotate：旋转中心与角度配置</h2> <p>Rotate 根据角度值绕指定支点旋转组件，适用于指针、阀门和方向指示。应同时确认角度单位和机械旋转中心。</p> <div class="docs-detail-list"> <article id="rotate-core-item-1" class="docs-detail-row"> <strong>Rotation input 与 Maximum angle</strong> <p>Rotation input 返回以度为单位的当前角度。Maximum angle 的绝对值定义允许范围：例如 90 对应 -90° 到 +90°。若数据源是百分比，应在 Rotation input 中显式换算为角度。</p> </article><article id="rotate-core-item-2" class="docs-detail-row"> <strong>按机械中心选择支点</strong> <p>PIVOT POINT 提供 Center、Top、Bottom、Left、Right。支点应与实际转轴重合；底端固定的指针可选 Bottom，左侧铰接部件可选 Left。</p> </article><article id="rotate-core-item-3" class="docs-detail-row"> <strong>Top / Bottom / Left / Right 的配置场景</strong> <p>当真实机械中心不在对象几何中心时，就不要默认 Center。比如指针底部固定、末端摆动，就更适合 Bottom；门板左侧铰接，就更适合 Left。</p> </article><article id="rotate-core-item-4" class="docs-detail-row"> <strong>旋转超限处理</strong> <p>Hide outside angle range 控制超出允许角度时是否隐藏；未启用时角度限制在边界。工艺超限提示应使用独立颜色行为，质量边框仅表示数据质量。</p> </article> </div> <div class="docs-note-grid"> <figure id="rotate-core-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorForm.png" alt="Rotate 几何行为" loading="lazy" decoding="async"> <figcaption> <strong>Rotate 行为</strong> <p>Rotate 里最值得仔细思考的通常不是角度本身，而是 Pivot。</p> </figcaption> </figure> </div> </section><section id="scale-core" class="docs-block"> <span class="section-kicker">Scale</span> <h2>Scale：变化边与缩放范围</h2> <p>Scale 最适合液位、进度条、增长条、充满效果和强调类大小变化。它不是简单把对象放大，而是有一个固定边和一个变化边。</p> <div class="docs-detail-list"> <article id="scale-core-item-1" class="docs-detail-row"> <strong>SCALE OUTPUT 的端点比例</strong> <p>At limit minimum / At limit maximum 为有效输入范围两端的缩放因子。0.5 表示原尺寸的一半，1 表示原尺寸，1.5 表示原尺寸的 1.5 倍。</p> </article><article id="scale-core-item-2" class="docs-detail-row"> <strong>Moving edge 指定移动边</strong> <p>Moving edge 选择随缩放移动的边，对边保持固定。液位填充向上增长应选 Top，使底边固定；向右增长的进度条应选 Right，使左边固定。</p> <ul> <li>Top：顶边移动、底边固定</li><li>Bottom：底边移动、顶边固定</li><li>Left：左边移动、右边固定</li><li>Right：右边移动、左边固定</li> </ul> </article><article id="scale-core-item-3" class="docs-detail-row"> <strong>Scale 与 Move 的选择边界</strong> <p>表达“长度变长或变短”时，优先用 Scale；表达“整个对象在页面上平移”时，优先用 Move。很多页面表达不清，是因为本应缩放的对象被配置成平移，或本应平移的对象被配置成缩放。</p> </article><article id="scale-core-item-4" class="docs-detail-row"> <strong>使用 Capture 记录目标比例</strong> <p>选择 Moving edge 后，在 PowerPoint 中仅拖动该边到目标尺寸，再点击端点旁的 Capture。编辑器计算比例并尝试恢复原始几何；不要平移整个组件来模拟缩放目标。</p> </article> </div> <div class="docs-note-grid"> <figure id="scale-core-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormSize.png" alt="Scale 几何行为" loading="lazy" decoding="async"> <figcaption> <strong>Scale 行为</strong> <p>Scale 的关键不是“变大变小”，而是“哪一边固定、哪一边变化”。</p> </figcaption> </figure> </div> </section><section id="post-ops" class="docs-block"> <span class="section-kicker">高级</span> <h2>几何表达式与页面脚本的边界</h2> <p>当前 Move、Rotate、Scale 编辑器没有 Setup Script（旧配置名 Definition）或 Post Operations 配置区。几何输入直接使用表达式；复用函数放在 Page Script。</p> <div class="docs-detail-list"> <article id="post-ops-item-1" class="docs-detail-row"> <strong>同步数值表达式</strong> <p>Source value、Rotation input 和各端点字段必须同步返回数值。可以直接调用 ReadTagDouble，或调用当前页 Page Script 中定义的换算函数。</p> </article><article id="post-ops-item-2" class="docs-detail-row"> <strong>共享计算放 Page Script</strong> <p>同页复用的名称、量程和换算函数放 Page Script。函数若需要实时值，应在行为每次求值时调用读取方法；页面初始化时读取一次不会自动更新。</p> </article><article id="post-ops-item-3" class="docs-detail-row"> <strong>内部计算结果不作为页面变量</strong> <p>ValueMin、ValueMax 等几何字段别名只在对应求值上下文内使用。其他组件需要相同的结果时，应复用 Page Script 函数，不依赖另一条行为的局部变量。</p> </article><article id="post-ops-item-4" class="docs-detail-row"> <strong>附加显示逻辑的配置入口</strong> <p>文本、颜色和可见性使用相应行为。需要由用户操作调整布局时，可在 Click Script 中调用 setComponentLayout；避免同一组件的布局同时被脚本和几何行为反复覆盖。</p> </article> </div> </section><section id="imperative-layout" class="docs-block"> <span class="section-kicker">脚本</span> <h2>脚本方式改布局：直接调用 hqVisuDesigner.setComponentLayout()</h2> <p>如果目标位置或目标尺寸已经明确，且这种变化难以通过固定几何行为表达，可以使用脚本直接调整布局。</p> <div class="docs-detail-list"> <article id="imperative-layout-item-1" class="docs-detail-row"> <strong>脚本布局的优先场景</strong> <p>当布局变化依赖多个输入、多个模板值或复杂条件组合时，脚本通常比堆叠大量几何参数更清晰。联动多个对象一起变化时，hqVisuDesigner.setComponentLayout() 会更直接。</p> </article><article id="imperative-layout-item-2" class="docs-detail-row"> <strong>适合什么高阶场景</strong> <p>拖动结果回写、对象成组平移、根据用户输入重新布置面板、根据模板值动态调整弹窗位置，这些都适合脚本方式。</p> </article><article id="imperative-layout-item-3" class="docs-detail-row"> <strong>最简单的脚本布局例子</strong> <p>此 Click Script 使用 getComponentData 的 left / top 读取源位置，用 setComponentLayout 的 x / y 设置位置。每次移至源位置右侧两个宽度处，不累计位移。</p> <pre class="docs-code-block"><code>// 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

});

}</code></pre> </article> </div> <div class="docs-note-grid"> <figure id="imperative-layout-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/ColorRangeBehaviorEditorForm.png" alt="范围动画与几何映射" loading="lazy" decoding="async"> <figcaption> <strong>范围映射</strong> <p>几何行为将输入范围映射到位移、角度或缩放范围；超出这些映射规则的布局需求可使用脚本。</p> </figcaption> </figure> </div> </section>