Easel Js 与 html 文档中的 canvas 一起使用，但是当我将 canvas 放入我的 GWT HTML 小部件中的 HTML 小部件时它不起作用它不起作用

Question

我进入主机 html 页面并放置

    <canvas id="canvas" width="200" height="200">
         alternate content
    </canvas>

然后我进入一个 JSNI 方法并把

$wnd.$('#canvas').ready(function() {
    console.log('ds');
    $wnd.stage = new $wnd.createjs.Stage("canvas");
    $wnd.stage.addChild(new $wnd.createjs.Shape()).set({x:100,y:100}).graphics.f("red").dc(0,0,50);
    $wnd.stage.update();
});

成功了。但随后我将 canvas 元素从 html 主机页面剪切并粘贴到我的 GWT 代码中的 HTML 小部件。它没有用。它没有给我一个错误。它根本没有做任何事情。

我尝试传入元素，但 document.getElementById() 没有成功。为什么它不起作用？ UiBinder里面的东西怎么不属于文档的一部分？

Answer 1

我不会使用 getElementById()。这是应该起作用的。在 UI 活页夹中：

<g:HTMLPanel>
     <canvas ui:field="canvas" width="200" height="200">
         alternate content
     </canvas>
</g:HTMLPanel>

在你Java看来class:

import static com.google.gwt.query.client.GQuery.$;

@UiField
Element canvas;

将 canvas 传递到您的 JSNI 函数中。它应该可以将 canvas 对象传递给 EaselJs。

Easel Js 与 html 文档中的 canvas 一起使用，但是当我将 canvas 放入我的 GWT HTML 小部件中的 HTML 小部件时它不起作用它不起作用

Easel Js works with a canvas in the html document but it doesn't work when I put the canvas in an HTML widget in my GWT HTML widget it doesn't work

html

gwt

canvas

easeljs

jsni