0

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?

willi
  • 1

1 Answers1

0

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

Moritz
  • 10,124
  • 7
  • 51
  • 61
  • The problem is when I add the event translation to the widget.translation, the widget is moving way too fast: if (event.state === "change") { let transform = widget.get("transform"); transform.translationX += event.translation.x; transform.translationY += event.translation.y; widget.set("transform", transform); } In the code which I posted first the canvas is moving correct. But it just jumps back to the starting position when I start a new pan. – willi Nov 22 '16 at 21:02