如何通過 XD 中的插件獲取文本元素的寬度值？

Question

我正在嘗試為 XD 構建一個插件來自動創建設計元素。 我編寫了一個 function 來使用文本元素和矩形構建按鈕（下面的第一張圖片）。 唯一的問題是矩形的形狀不是基於文本的寬度，所以當文本較長時，文本會與矩形重疊（見下圖）。

我一直在試圖弄清楚如何獲取文本元素的寬度值，以便我可以適當地調整矩形的大小。 誰能幫我這個？

我已經通過添加行console.log (selection.items);弄清楚了這一點。 我可以將 output 屬性的完整列表寫入日志，但是如何訪問寬度屬性？

這是顯示矩形和文本元素的日志 output...

[ Text ('Submit Button') {
    width: 113, height: 20
    global X,Y: -3, -74
    parent: Artboard ('iPad – 1')
    fill: ff000000
  },
  Rectangle ('Rectangle 6') {
    width: 100, height: 50
    global X,Y: -3, -58
    parent: Artboard ('iPad – 1')
    stroke: ff2d3494
  } ]

這是我的完整代碼...

const {Rectangle, Color, Text, Selection} = require("scenegraph"); 
let commands = require("commands");

function createButton(selection) { 

    // Create the outline of the button
    const newButtonOutline = new Rectangle(); 
    newButtonOutline.width = 100;
    newButtonOutline.height = 50;
    newButtonOutline.stroke = new Color("#2D3494");
    newButtonOutline.strokeWidth = 2;
    newButtonOutline.cornerRadii = { 
        topLeft: 10, 
        topRight: 10, 
        bottomRight: 10, 
        bottomLeft: 10
    };

    // Create the text for the button
    const newButtonLabel = new Text();
    newButtonLabel.text = "Submit Button";
    newButtonLabel.fontSize = 18;
    newButtonLabel.fill = new Color("#000000");


    // Add the text and outline to the artboard
    selection.insertionParent.addChild(newButtonOutline);
    newButtonOutline.moveInParentCoordinates(100, 100);
    selection.insertionParent.addChild(newButtonLabel);
    newButtonLabel.moveInParentCoordinates(100, 100);
    selection.items = [newButtonLabel, newButtonOutline];
    console.log (selection.items);

    //align the button elements and group together 
    commands.alignHorizontalCenter();
    commands.alignVerticalCenter();
    commands.group();

}

我希望有人能幫幫忙！

Answer 1

所以事實證明，要獲取文本節點的寬度，您需要從 localBounds 獲取它，比如......

textNode.localBounds.width

或者要獲得圖形節點的寬度，它只是......

圖形節點寬度

Answer 2

console.log(selection.items[0].boundsInParent.x);
console.log(selection.items[0].boundsInParent.y);
console.log(selection.items[0].boundsInParent.width);
console.log(selection.items[0].boundsInParent.height);