Question

我要调整Artboard及其项目的大小。

方法1：将Artboard的所有项目分组并按与Artboard比例相同的比例进行缩放

方法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

如果尚未找到解决方案，请参阅我的存储库：

JSON Extractor

它在开发中是因为当画板包含符号，组，模糊时会出现不希望有的行为，但它可以正常工作。随时贡献。

无论如何，下面的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,
        }
    }
};

如何通过API缩放Artboard及其项目？

2 个答案: