Question

我想将现有的带有webview的cordova游戏移植到tabris.js。有一个画布可以捏缩放，你可以移动画布。

var page = new tabris.Page({
    topLevel: true,
    title: "Canvas Test"
});

var canvas = new tabris.Canvas({
    centerX: 0, centerY: 0, width: 500, height: 500,
    background: "#234"
})
.on("resize", function (canvas, bounds) {
    const ctx = canvas.getContext("2d", bounds.width, bounds.height);
    ctx.beginPath();
    ctx.lineWidth = 50;
    ctx.arc(250, 250, 100, 0, 2 * Math.PI, false);
    ctx.strokeStyle = 'white';
    ctx.stroke();
}).appendTo(page);

canvas.on("pan", function (widget, event) {
    if (event.state === "change") {
        widget.set("transform", {
            translationX: event.translation.x,
            translationY: event.translation.y });
    }
});

page.open();

这是我尝试使用“pan”移动画布。我可以移动画布，但是当我松开手指并尝试再次移动画布时，它会跳回到起始位置。有谁知道我怎么解决这个问题？

Answer 1

pan事件返回相对于当前位置的转换。因此，您必须将事件转换添加到画布翻译中。

Tabris.js手势事件平底锅

1 个答案: