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

Question

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

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

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

附：我用的是 Vaadin 7.3.3。

Answer 1

稍后添加：

Here is a link to my educational project with implementation below. 如果它对某人有帮助，我会很高兴。

原始答案：

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

客户端部分：

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