Tabris.js gesture event pan

Question

I want to port an existing cordova game with webview to tabris.js. There is a canvas on which you can pinch to zoom and you can move the canvas around.

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

This is my attempt to move the canvas by using "pan". I can move the canvas, but when I release my finger and try to move the canvas once again, it jumps back to the starting position. Does anyone know how I can solve that?

Answer 1

The pan event returns the translation relative to the current position. So you have to add the event translation to your canvas translation.