Vaadin canvas fabric.js 无用户交互

Question

我有一个 GWT 小部件 (canvas) 基于 fabric.js 完美运行。现在我需要将它插入 vaadin，我制作了一个插件，除了用户事件（canvas 内的拖动对象）之外的所有工作都无法工作，原因不明。它绘制对象，但我不能移动它们并对其进行任何操作（因为它应该工作）。我认为有一个 css 规则阻止了这个功能。现在在我的 vaadin 应用程序中，它看起来像一个序号图像（当将对象悬停在 canvas 等上时，光标没有变化）。

"fabric.js" 部分 invaadin 插件 (GWT) 的代码：

 var fabricx = new $wnd.fabric.Canvas(canvas);
    $wnd.fabricx = fabricx;
    var rect = new $wnd.fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 150,
        height: 40
    });

    var rect2 = new $wnd.fabric.Rect({
        left: 200,
        top: 200,
        fill: 'green',
        width: 150,
        height: 40
    });

    var text = new $wnd.fabric.IText("Time:\nDate:\nElse:", {
        left: 500,
        top: 20,
        fontSize: 13,
        selectable: false
    });

    fabricx.add(rect);
    fabricx.add(rect2);
    fabricx.add(text);

这导致： enter image description here

Answer 1

终于，我找到了导致这个问题的原因。当GWT module "extends Composite" 时，不要直接通过initWidget 添加widget，而是先添加到panel，然后将panel 传递给init widget。我已经随机更改代码 2 天并找到了答案。

Vaadin canvas fabric.js 无用户交互

Vaadin canvas fabric.js no user interaction

canvas

fabricjs

vaadin7