2

我正在尝试将RaphaelJS论文嵌入到 qooxdoo 小部件中。RaphaelJS 是一个用于 JavaScript 的 SVG 绘图库，它需要<div>在任何绘图之前绑定到 HTML。为此，我调用new qx.ui.embed.Html("<div id='raphael'></div>") 并将其添加到我的小部件中。之后，我应该通过将 div ID 传递给 Raphael 来初始化它。

问题是在构造函数调用<div id='raphael'>之后没有提交给 DOM 模型（即，没有创建真正的 DOM 元素） 。qx.ui.embed.Html()DOM 元素的创建确实推迟到小部件被绘制到屏幕上。我已经设法appear为小部件捕获了一个事件，之后，元素的存在得到保证，我可以初始化 Raphael 库并进行一些绘图。

这种方法假定我必须从该appear事件处理程序中运行我的所有应用程序逻辑，这可能不是我想要的。是否有任何其他方法可以在主应用程序流程中使小部件处于可绘制状态？

4

2 回答 2

1

您可以做的是创建自己的小部件RaphaelWidget.js：

qx.Class.define("myApp.RaphaelWidget",
{
  extend : qx.ui.core.Widget,

  construct : function()
  {
    this.base(arguments);

    this.addListener("appear", this._onAppear, this);
  },

  members :
  {
    /**
     * Overwritten from qx.ui.core.Widget.
     */
    _createContentElement : function()
    {
      return new qx.html.Element("div", {
        overflowX: "hidden",
        overflowY: "hidden",
        border: "1px solid #aaa"  // just for debugging
      }, {"id": "canvas-raphael"});
    },

    _onAppear : function()
    {
      var paper = new Raphael(document.getElementById('canvas-raphael'), 250, 250);
      var circle = paper.circle(100, 100, 80);
    }
  }
});

然后例如在您的Application.js：

var raphael = new myApp.RaphaelWidget();
raphael.setWidth(250);
raphael.setHeight(250);
this.getRoot().add(raphael);

现在您可以在这个新的小部件类中开发您的 Raphael 特定代码。

于 2013-06-18T12:06:07.247 回答
0

强制渲染/DOM 操作在 qooxdoo 中称为“刷新”。例如，Richard 解决方案中的 qx.html.Element 有一个.flush()方法。您可能想试试这个，或者在API 文档中搜索术语“flush”。

话虽如此，冲洗是最后的手段，不应过度使用，因为这会严重降低性能。当你在做 JavaScript 时，你不应该回避异步编程。甚至您的“主要”方法也是一个回调，在某个时间点从 qooxdoo 运行时调用。

有几个 qooxdoo 贡献集成了第三方库，比如 Rafael。有关执行此操作的更惯用的解决方案，请参见例如QxDyGraphs（部分__addCanvas方法），这是一个集成Dygraphs JS 库的贡献。

于 2013-06-20T10:52:48.697 回答