使用 Dojo 的 gfx 库更改文本图形对象的文本答案

【问题标题】：change text of a Text graphics object using gfx library of Dojo使用 Dojo 的 gfx 库更改文本图形对象的文本
【发布时间】：2020-02-04 06:10:24
【问题描述】：

我用一些代码创建了一个文本对象：

var surface = dojox.gfx.createSurface(dojo.byId("gfx-holder"), 850, 400);
var myText = surface.createText({x:55, y:60, text:"Original"});

稍后我想更改文本。我已经尝试了很多变化：

myText.text = "Updated";

或

myText.setText({text: "Updated"});

没有运气，我想用更新的文本替换原始文本。是唯一的选择删除旧的并重新绘制吗？

【问题讨论】：

标签： javascript svg dojo dojox.gfx

【解决方案1】：

您可以简单地访问节点并更改它的 innerHtml 文本，如

myText.rawNode.innerHTML = "Updated !";

参见下面的 sn-p ：

require([ "dojo/dom", "dijit/registry", "dojo/_base/lang", "dojo/ready", "dojox/gfx", "dijit/ConfirmDialog", "dijit/form/Button"],
  function( dom, registry, lang, ready, gfx) {
    let i = 0;
    ready(function() {
      var surface = gfx.createSurface(dom.byId("gfx-holder"), 200, 100);
      var myText = surface.createText({x:55, y:60, text:"Original"});

      registry.byId("btn").on("click", function(e) {
        i++;
        myText.rawNode.innerHTML = "Updated !"+i;
      });

    })
  }
);

#gfx-holder {
  border: 1px solid black;
}

#gfx-holder {
  fill-opacity: 1 !important;
}
#gfx-holder text {
  fill: black !important;
  fill-opacity : 1 !important;
}

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">
  <div id="gfx-holder"></div>
  <div data-dojo-type="dijit/form/Button" id="btn"> Update text </div>
</body>

【讨论】：

@JamesB 有帮助吗！
@JamesB 不客气，如果您可以将其标记为已解决，link