Java 如何使用Vaadin创建交互式图形？

我想开发一个简单的交互式游戏（比如arcanoid）。我已经实现了一个菜单和不同的视图，现在我需要开发实际的游戏（画飞球，一些可移动的平台），我不知道怎么做。我需要像画布一样的东西，在那里我可以在每一帧中绘制我的图形

我已经尝试使用和计时器来实现这一点。但它不想更新图形本身，只想在用户点击屏幕或类似屏幕时更新。我还看到了com.google.gwt.canvas.client.canvas，但我不明白如何在Vaadin应用程序中使用它

所以我接下来的问题是：是否有可能以任何方式在高帧率的每一帧中绘制一些图形？如果可能的话，我怎么做

---

注意：我使用的是Vaadin 7.3.3。

后来添加：

如果它能帮助别人，我会很高兴的

原始答案：

嗯。。。我自己找到了解决办法。首先，我创建了自己的小部件——“客户端”组件（根据本文）

客户端部分：

public class GWTMyCanvasWidget extends Composite {

public static final String CLASSNAME = "mycomponent";
private static final int FRAMERATE = 30;

public GWTMyCanvasWidget() {
    canvas = Canvas.createIfSupported();
    initWidget(canvas);
    setStyleName(CLASSNAME);
}

public class MyCanvas extends AbstractComponent {

    @Override
    public MyCanvasState getState() {
        return (MyCanvasState) super.getState();
    }
}

连接器：

@Connect(MyCanvas.class)
public class MyCanvasConnector extends AbstractComponentConnector {    

    @Override
    public Widget getWidget() {
        return (GWTMyCanvasWidget) super.getWidget();
    }

    @Override
    protected Widget createWidget() {
        return GWT.create(GWTMyCanvasWidget.class);
    }
}

服务器端部分：

public class GWTMyCanvasWidget extends Composite {

public static final String CLASSNAME = "mycomponent";
private static final int FRAMERATE = 30;

public GWTMyCanvasWidget() {
    canvas = Canvas.createIfSupported();
    initWidget(canvas);
    setStyleName(CLASSNAME);
}

public class MyCanvas extends AbstractComponent {

    @Override
    public MyCanvasState getState() {
        return (MyCanvasState) super.getState();
    }
}

然后我只需在视图中添加

MyCanvas

组件：

private void createCanvas() {
    MyCanvas canvas = new MyCanvas();
    addComponent(canvas);
    canvas.setSizeFull();
}

现在我可以在画布上画任何东西（在GWTMyCanvasWidget的客户端上），性能非常好=）。例如：

public class GWTMyCanvasWidget extends Composite {

    public static final String CLASSNAME = "mycomponent";
    private static final int FRAMERATE = 30;
    private Canvas canvas;
    private Platform platform;
    private int textX;

    public GWTMyCanvasWidget() {
        canvas = Canvas.createIfSupported();
        canvas.addMouseMoveHandler(new MouseMoveHandler() {
            @Override
            public void onMouseMove(MouseMoveEvent event) {
                if (platform != null) {
                    platform.setCenterX(event.getX());
                }
            }
        });
        initWidget(canvas);
        Window.addResizeHandler(new ResizeHandler() {
            @Override
            public void onResize(ResizeEvent resizeEvent) {
                resizeCanvas(resizeEvent.getWidth(), resizeEvent.getHeight());
            }
        });
        initGameTimer();
        resizeCanvas(Window.getClientWidth(), Window.getClientHeight());
        setStyleName(CLASSNAME);
        platform = createPlatform();
    }

    private void resizeCanvas(int width, int height) {
        canvas.setWidth(width + "px");
        canvas.setCoordinateSpaceWidth(width);
        canvas.setHeight(height + "px");
        canvas.setCoordinateSpaceHeight(height);
    }

    private void initGameTimer() {
        Timer timer = new Timer() {
            @Override
            public void run() {
                drawCanvas();
            }
        };

        timer.scheduleRepeating(1000 / FRAMERATE);
    }

    private void drawCanvas() {
        canvas.getContext2d().clearRect(0, 0, canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight());
        drawPlatform();
    }

    private Platform createPlatform() {
        Platform platform = new Platform();
        platform.setY(Window.getClientHeight());
        return platform;
    }

    private void drawPlatform() {
        canvas.getContext2d().fillRect(platform.getCenterX() - platform.getWidth() / 2, platform.getY() - 100, platform.getWidth(), platform.getHeight());
    }
}

---

“高帧率”将很难实现，因为我们在这里讨论的都是HTML。Vaadin将封装所有这一切，但由于这一点，您将在某些时候遇到性能问题。你最好的建议是：忘记纯HTML（JS）网站中的“游戏”吧，除非你使用的是保证加速的元素——vaadin中的canvas支持是测试版，因此不会总是像预期的那样工作。你使用了错误的语言，HTML不是为游戏设计的。好吧，但是我在HTML和JS上看到了很多简单的游戏。我知道我不能用3D实现AAA游戏，但我只想要一个会飞的2d球=）。使用Vaadin是不可能的，也许需要一些定制？而且我使用“不稳定”画布没有任何问题，它不是商业产品，只是为了学习。试图通过最困难的方法（游戏）来“学习”任何东西肯定会失败。现在还不要试图接管世界，从简单的网站开始，在这些网站上继续简单的JS，最后开始学习真正的编程语言，比如Java或类似的东西。您可以使用Java创建2D/3D游戏，甚至可以在浏览器中访问这些游戏……感谢您的建议。但我仍然在寻找我问题的答案。我不太了解Vaadin（也不太了解Java），但据我所知，它根据Java代码生成JS+HTML（通过使用GWT）。因此，我正在寻找一种使用客户端画布绘制简单交互式图形的方法。我建议您通过BitBucket或GitHub等服务共享您的项目。这将是非常有帮助和教育他人。当然，我可以分享这个项目。特别是，如果有人觉得它有用：）。