脚本方式改布局：直接调用 hqVisuDesigner.setComponentLayout() | Mingcedar Studio

<section id="imperative-layout" class="docs-block docs-block-intro docs-block-current"> <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(&quot;GatePositionIndicator&quot;);

if (data) {

hqVisuDesigner.setComponentLayout(&quot;GatePositionIndicator&quot;, {

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>