2

CAD 図面をブラウザで表示するプロジェクトに取り組んでいます。この Web サイトはデスクトップ ブラウザーで完全に機能しますが、モバイルでの使用 (タブレット用) を有効にする必要があります。

私の描画は、キャンバス描画呼び出し (context.lineTo、...) によってデータから作成されます。onMouseDown/onMouseMove/onMouseUp JS イベントとマウスホイール イベントによるズームを検出してドラッグを行います。

モバイル デバイスでは、そのどれも機能しません (おそらく、私がキャッチしているイベントを発生させないためです)。タッチスクリーンのスワイプをドラッグとして、ピンチをズームとして実装する簡単な方法は何ですか?

ご協力いただきありがとうございます！

4

2 に答える 2

1

既存の jQuery プラグインを使用したい場合は、Hammer.js を調べてください。とても使いやすいライブラリです。ただし、純粋な Javascript ソリューションを好む場合は、こちらをご覧ください: https://github.com/rombdn/img-touch-canvas タッチ イベントを使用してキャンバス上で画像をドラッグおよびズームするのに非常に便利です。

さらに、ここに私のソリューションがあります。これは非常にシンプルで簡単ですが、純粋な Javascript を使用するためのドラッグ可能な唯一のソリューションです。

HTML:

<canvas id="canvas"></canvas>

JS:

var can = document.getElementById("canvas");
can.addEventListener("touchstart", ctxTouchStart, false);
can.addEventListener("touchmove", ctxTouchMove, false);
can.addEventListener("touchend", ctxTouchEnd, false);

var oX, oY, dX, dY, iX, iY;
iX = 0; iY = 0;

function ctxTouchStart(e) {
    if (!e)
        var e = event;
    e.preventDefault();

    mouseIsDown = 0;
    oX = e.targetTouches[0].pageX - canvas.offsetLeft;
    oY = e.targetTouches[0].pageY - canvas.offsetTop;
}
function ctxTouchMove(e) {
    if (!e)
        var e = event;
    e.preventDefault();
    var canX = e.targetTouches[0].pageX - canvas.offsetLeft;
    var canY = e.targetTouches[0].pageY - canvas.offsetTop;
    dX = canX - oX;
    dY = canY - oY;

    /*   redraw img on canvas
     *   where -(iX + dX) is the startX 
     *   and -(iY + dY) is the startY 
     */
    reDrawImageOnCanvas(can, img, -(iX + dX), -(iY + dY));
}
function ctxTouchEnd(e) {
    if (!e)
        var e = event;
    e.preventDefault();
    iX += dX;
    iY += dY;
}

そうすることで、キャンバス内で画像をスムーズにドラッグできます。ただし、ズーム部分の実行方法がわからなかったので、オンラインで検索したところ、https://github.com/rombdn/img-touch-canvasが便利であることがわかり、代わりにこれを使用するように切り替えました。私の答えが役に立てば幸いです。

于 2015-12-03T18:41:30.207 に答える
1

KineticJS ( http://kineticjs.com )を確認してください。モバイル デバイス用のドラッグ アンド ドロップ キャンバスもサポートしています。

チュートリアルについては、次のリンクを参照してください。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

于 2013-05-31T10:26:19.480 に答える