изменить текст графического объекта Text, используя библиотеку gfx Dojo - PullRequest
Новая
       23

изменить текст графического объекта Text, используя библиотеку gfx Dojo

1 голос
/ 04 февраля 2020

Я создал текстовый объект с кодом: 

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

Без удачи я хочу заменить исходный текст обновленным текстом. Является ли единственной возможностью удалить старую и снова нарисовать?

1 Ответ

2 голосов
/ 04 февраля 2020

Вы можете просто получить доступ к узлу и изменить его внутренний Html текст, например 

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>
...