Question

我正在尝试为XD构建插件，以自动创建设计元素。我编写了一个使用文本元素和矩形构建按钮的功能（下面的第一张图片）。唯一的问题是矩形的形状不是基于文本的宽度，因此，当文本较长时，最终会导致文本与矩形重叠（请参见下面的第二张图片）。

我一直在尝试找出如何获取文本元素的宽度值，以便可以适当调整矩形的大小。有人可以帮我吗？

我已经发现，通过添加行 console.log（selection.items）; ，我可以将完整的属性列表输出到日志，但是该怎么做我访问width属性？

这是显示矩形和文本元素的日志输出...

[ 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

或者要获得图形节点的宽度，就是...

graphicNode.width

您如何通过XD中的插件获取文本元素的宽度值？

1 个答案: