Question

我最近开始了一个使用PIXI.js绘制网络图的简单项目。我是PIXI.js的新手，所以我不太确定如何充分利用这个库。 bl.ocks.org上的一个项目引起了我的兴趣： https://bl.ocks.org/kirjavascript/dcafa2b3a53cbcc9c5de19b938b92119

有什么方法可以显示节点的名称。我设法做到了，但文字不清楚，只是留在窗口。

如何清除文本，以便每当拖动节点时，旧的文本的位置被清除了吗？

下面的屏幕截图是输出的片段。

我编辑勾选的函数并生成此结果。以下代码是ticked()函数的摘录：

function ticked() {   
    graph.nodes.forEach((node) => {
        var { x, y, gfx } = node;
        gfx.position = new PIXI.Point(x, y);

        var text = new PIXI.Text(node.id, textStyle);                        
        text.x = x;
        text.y = y;                                            
        stage.addChild(text);                            
    });

    links.clear();
    links.alpha = 0.6;                                    

    graph.links.forEach((link) => {
        var { source, target } = link;
        links.lineStyle(1.5, 0x000000);
        links.moveTo(source.x, source.y);
        links.lineTo(target.x, target.y);
    });                                    

    links.endFill();

    renderer.render(stage);

}

Answer 1

看起来你每个tick都在创建一个新的PIXI.Text实例。您只想为每个节点创建1个文本实例，然后重复使用它。

PS。设置位置，执行

gfx.position.set(x, y);

保存创建不必要的PIXI.Points每个滴答。

在节点PIXI.js上附加文本

1 个答案: