0

既存のcordovaゲームをwebviewで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();

これは、「パン」を使用してキャンバスを移動しようとする私の試みです。キャンバスを動かすことはできますが、指を離してもう一度キャンバスを動かそうとすると、元の位置に戻ってしまいます。誰も私がそれを解決する方法を知っていますか?

4

1 に答える 1

0

パン イベントは、現在の位置に相対的な移動を返します。そのため、イベントの翻訳をキャンバスの翻訳に追加する必要があります。

于 2016-11-22T09:40:07.733 に答える