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

Question

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

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"});

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

Answer 1

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

myText.rawNode.innerHTML = "Updated !";

请参阅以下代码段：

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>

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

change text of a Text graphics object using gfx library of Dojo

javascript

dojo

svg

dojox.gfx