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

Question

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

or

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?

Answer 1

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

Question

1 answers

solution1
0 ACCPTED 2020-02-04 08:36:22

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

Question

1 answers

solution1 0 ACCPTED 2020-02-04 08:36:22

solution1
0 ACCPTED 2020-02-04 08:36:22