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

Question

我想开发一个简单的互动游戏（如打砖块）。我已经实现了菜单和不同的视图，现在需要开发真正的游戏（绘制飞行球，一些可移动平台），但我不知道该怎么做。我需要像画布一样的东西，可以每帧绘制我的图形。

我尝试使用 Canvas 和计时器来实现这个功能。但它不会自动更新图形，只有当用户点击屏幕或类似操作时才会更新。我还看到了 com.google.gwt.canvas.client.Canvas，但我不知道如何在 Vaadin 应用程序中使用它。

所以我的问题是：是否有可能以任何方式每帧绘制一些图形，并保持高帧率？如果可能，我该怎么做？

附言：我使用的是 Vaadin 7.3.3。

- Crabar

---

一个“高帧率”在这里将非常难以实现，因为我们所说的都是HTML。Vaadin将封装所有这些内容，但由于这个原因，您最终会遇到性能问题。您最好的建议是：除非您使用保证加速的元素（Vaadin中的画布支持为BETA，因此不总是按预期工作），否则请忘记纯HTML（JS）网站中的“游戏”。您正在使用错误的语言，HTML并不适用于游戏。 - specializt

好的，但是我看到使用HTML和JS制作的许多简单游戏。我知道我无法用3D实现AAA游戏，但我只想要一个飞行的2D球 =)。使用Vaadin不可能实现吗？也许需要一些自定义？ - Crabar

我没有使用“不稳定的”画布遇到任何问题，它并不是商业产品，只是为了学习而已。 - Crabar

试图通过最困难的途径（游戏）来“学习”任何东西几乎肯定会导致失败。不要急于想要征服世界，从简单的网站开始，然后在这些网站上使用简单的JS，最后开始学习像Java或类似的真正的编程语言。你可以使用Java创建2D/3D游戏，甚至可以使它们在浏览器中访问... - specializt

抱歉，我不明白函数式编程如何帮助解决我的问题...也许您可以给一些例子？ - Crabar

Answer 1

后来添加:

这是我的教育项目链接，下面是实现。 如果有帮助到任何人，我会很高兴。

原始回答:

嗯...我自己找到了解决方案。首先，我创建了自己的小部件-“客户端”组件（根据这篇文章）。

客户端部分：

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);
}

连接器：

@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 MyCanvas extends AbstractComponent {

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

然后我只需在我的视图上添加MyCanvas组件：

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

现在我可以在 Canvas 上（在 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());
    }
}

- Crabar

---

我建议你通过像BitBucket或GitHub这样的服务分享你的项目。这对其他人来说将非常有用和有教育意义。 - Basil Bourque

当然，我可以分享这个项目。特别是如果有人觉得它有用的话 :)。 - Crabar