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



我创建了一个带有以下代码的文本对象:

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

没有运气,我想用更新的文本替换原始文本。删除旧文件并再次绘制是唯一的选择吗?

您可以简单地访问节点并更改其内部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>

最新更新