Question

我有一个完美的GWT小部件（画布），基于fabric.js。现在我需要将其插入vaadin，我制作了一个插件，除了用户事件（在画布中拖动对象）之外的所有工作都不会因为未知原因而工作。它绘制物体，但我不能移动并对它们采取任何行动（因为它应该工作）。我认为有一个css规则可以阻止这个功能。现在我的内部vaadin应用程序看起来像一个序数图像（当在画布上悬停对象时没有光标变化等）。

＆＃34; fabric.js＆＃34;的代码部分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模块“扩展Composite”时，你不应该直接通过initWidget添加小部件，而是首先将它添加到面板，然后将面板传递给init小部件。我已经在代码中随机进行了2天的更改并找到了答案。

Vaadin canvas fabric.js没有用户交互

1 个答案: