Vaadin canvas fabric.js 没有用户交互答案

【问题标题】：Vaadin canvas fabric.js no user interactionVaadin canvas fabric.js 没有用户交互
【发布时间】：2016-06-27 16:40:14
【问题描述】：

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

“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

【问题讨论】：

您能提供更多信息吗？错误是什么样的？
浏览器控制台中没有错误。就像这样：fabricjs.com/controls-customization 但你不能选择移动旋转等，没有用户交互
显示实际代码或关闭它
我提供了代码

标签： canvas fabricjs vaadin7

【解决方案1】：

最后，我找到了导致此问题的原因。当 GWT 模块“扩展 Composite”时，您不应该直接通过 initWidget 添加小部件，而是先将其添加到面板，然后将面板传递给 init 小部件。这两天我一直在随机修改代码，找到了答案。

【讨论】：