0

これとこれを試してみましたが、マウスイベントでのみ機能することがわかりました。いくつかの写真をキャンバスにドロップし、ユーザーがそれに「タッチ」してドラッグアンドドロップできるようにしたいと思います。しかし、画像はユーザーのタッチイベントを受信せず、キャンバスのみがイベントを受信するようです。

提案やプラグインはありますか？
ps：PhonegapとAndroidシステムでアプリケーションを開発しています。

4

1 に答える 1

0

また、タッチを管理するためのMicrosoftからのイベントであるMSPointerイベントも処理する必要があります（Win8およびWinPhone 8で導入されました）。

必要な手順、各フレーム：

  1. マウス、タッチ、MSPointerイベントを検出する
  2. 画像と衝突するカーソル位置を確認してください
  3. 画像を移動する

最初のポイントについて：

function getCursorPositions (event, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, positions = [];

if (element.offsetParent) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}

// Add padding and border style widths to offset
/*offsetX += stylePaddingLeft;
offsetY += stylePaddingTop;

offsetX += styleBorderLeft;
offsetY += styleBorderTop;*/

var touch = event;
//if multi-touch, get all the positions
if (event.targetTouches) { // or changedTouches
    var touchPoints = (typeof event.targetTouches !== 'undefined') ? event.targetTouches : [event];
    for (var i = 0; i < touchPoints.length; i++) {
        touch = touchPoints[i];

        positions.push({touch.pageX - offsetX, touch.pageY - offsetY});
    }
}
else {
    positions.push({touch.pageX - offsetX}, {touch.pageY - offsetY});
}

    //return positions for mouse or fingers
return positions;
}

2番目のポイントでは、衝突を検出する方法が少なくとも2つあります。

マウスの位置がアイテムのバウンディングボックス内にあるかどうかを確認できます。

function pointIsInRegion (point, targetRegion, threshold) {
    return point.x >= (targetRegion.position.x - threshold) &&
        point.y >= (targetRegion.position.y - threshold) &&
        point.x <= (targetRegion.position.x + targetRegion.dimension.width + threshold) &&
        point.y <= (targetRegion.position.y + targetRegion.dimension.height + threshold);
}

または、ピクセルの衝突をチェックすることで、より正確にすることができます。この2番目の方法を実現するには、アイテムを一時的なキャンバスにレンダリングし、2つのアイテムから衝突するピクセルが少なくともあるかどうかを確認する必要があります（マスクを使用して加速できます）。

3番目のポイント（画像の移動）では、「currentCursorPosition--previousCursorPosition」から画像を移動するだけです。それが最も簡単な部分です。

とにかく、フレームワークを使用することをお勧めします。コードはすでに完了しており、より速く進むのに役立ちます。 cgSceneGraph（私はこのフレームワークの設計者です）は、ほんの数行であなたに代わって仕事をします。「planner2D」と「collision」の例をご覧ください（http://gwennaelbuchet.github.com/cgSceneGraph/examples.html）

これがお役に立てば幸いです。

于 2013-02-11T10:03:48.430 に答える