如何通过 API 缩放画板及其项目?

Question

我想调整画板及其项目的大小。

方法 1：对画板的所有项目进行分组，并以与画板比例相同的比例缩放它们

方法 2：是否有办法设置子项的宽度

我不知道这两种方式都是怎么做的

Answer 1

您可以循环访问所需画板的子级，并为每个子级设置宽度。

artboard.children.forEach((item) => {
// Do what you want here
// ...
// Set the width of an element
item.width = 200; // New width here
})

如果这是一个面板插件，不要忘记用application.editDocument包装它。希望对您有所帮助！

Answer 2

如果您还没有找到解决方案，请参阅我的存储库：

https://github.com/nick-bratton/AdobeXD-Scale-Everything

它正在开发中，因为当画板包含符号、组、模糊时，存在不需要的行为，但它在其他方面工作。请随时做出贡献。

无论如何，下面的switch语句很冗长，因为我在开发时会控制台登录很多，但请看一下：

let panel;
function create() {
const HTML =
`<style>
.break {
flex-wrap: wrap;
}
label.row > span {
color: #8E8E8E;
width: 20px;
text-align: right;
font-size: 9px;
}
label.row input {
flex: 1 1 auto;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
<form method="dialog" id="main">
<div class="row break">
<label class="row">
<span>↕︎</span>
<input type="number" uxp-quiet="true" id="inputScaleFactor" placeholder="Scale Factor (e.g., 2)" />
</label>
</div>
<footer><button id="ok" type="submit" uxp-variant="cta">Apply</button></footer>
</form>
<p id="warning">Select something to scale or CMD+A to select everything.</p>
`
function scale() {
const { editDocument } = require("application");
const scaleFactor = Number(document.querySelector("#inputScaleFactor").value);
editDocument({ editLabel: "Scale selection" }, function (selection) {
// locked items not currently handled
if (selection.items[0].constructor.name == 'Artboard'){
scaleArtboardAndItsChildren(selection, scaleFactor);
}
else {
scaleSelection(selection, scaleFactor);
}
})
}
panel = document.createElement("div");
panel.innerHTML = HTML;
panel.querySelector("form").addEventListener("submit", scale);
return panel;
}
function translateByScaleFactor(node, scaleFactor){
node.placeInParentCoordinates({x: 0,y: 0}, {x: node.topLeftInParent.x *= scaleFactor, y: node.topLeftInParent.y *= scaleFactor});
}
function resizeNode(node, scaleFactor){
node.resize(node.localBounds.width *= scaleFactor, node.localBounds.height *= scaleFactor);
}
function applyModifications (node, scaleFactor){
switch (node.constructor.name){
case 'Rectangle':
case 'Ellipse':
case 'Polygon':
case 'Line':
case 'Path':
case 'Group':
case 'BooleanGroup':
case 'Group':
case 'SymbolInstance':
case 'RepeatGrid':
case 'LinkedGraphic':
resizeNode(node, scaleFactor);
translateByScaleFactor(node, scaleFactor);
break;
case 'Text':
node.fontSize *= scaleFactor;
node.lineSpacing *= scaleFactor;
translateByScaleFactor(node, scaleFactor);
break;
default: 
console.log('This plugin does not know how to handle layers of type: ' + node.constructor.name);
}
}
function scaleSelection(selection, scaleFactor){
selection.items.forEach(function (child){
applyModifications(child, scaleFactor);
});
}
function scaleArtboardAndItsChildren(selection, scaleFactor){
let artboard = selection.items[0];
artboard.resize(artboard.localBounds.width *= scaleFactor, artboard.localBounds.height *= scaleFactor);
artboard.children.forEach(function (child) {
applyModifications(child, scaleFactor);
});
}
function show(event) {
if (!panel) event.node.appendChild(create());
}
module.exports = {
panels: {
scaleEverything: {
show,
}
}
};