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

132 Views Asked by JamesB At 18 May 2025 at 19:09

I've created a text object with some code like :

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

Later I'd like to change the text. I've tried a lot of variations on:

myText.text = "Updated";

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

With no luck , I want to replace the original text with an updated text. Is the only option to delete the old one and draw again?

Original Q&A

There are 1 best solutions below

Bourbia Brahim On 04 February 2020 at 08:36 BEST ANSWER

You can simply access the node and change it's innerHtml text like

myText.rawNode.innerHTML = "Updated !";

See below snippet :

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>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SVG

Related Questions in DOJO

Related Questions in DOJOX.GFX

Trending Questions

Popular # Hahtags

Popular Questions