adobe-xd - 如何通过 API 缩放画板及其项目？

Question

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

方法1：将Artboard的所有项目分组并以与Artboard比例相同的比例缩放它们

方法2：如果有办法设置子项的宽度

我不知道这两种方法怎么做

Answer 1

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

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,
        }
    }
};

Answer 2

您可以遍历所需画板的子级并设置每个子级的宽度。

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

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