0

ユーザーの描画線が配列値の 2 つのグループの間にあることを追跡したい。たとえば、キャンバスの中央に 1 つの線を描画し、配列オブジェクトの 2 つのグループを x 座標と y 座標に設定した。配列と比較して x 座標と y 座標を取得するにはどうすればよいですか。行が 2 セットの配列の間にない場合は、答えが間違っていることを示します。助けてください

コードは次のとおりです。 var coordsa=new Array();

coordsa.push({x:479,y:60});
coordsa.push({x:480,y:60});
coordsa.push({x:481,y:60});
coordsa.push({x:482,y:60});
coordsa.push({x:483,y:60});
coordsa.push({x:484,y:60});
coordsa.push({x:485,y:60});
coordsa.push({x:486,y:60});
coordsa.push({x:487,y:60});
coordsa.push({x:488,y:60});

var xcoorda =coordsa[0].x;
var ycoorda =coordsa[0].y;

var coordsb =new Array(); 

coordsb.push({x:467,y:74});
coordsb.push({x:468,y:75});
coordsb.push({x:469,y:75});
coordsb.push({x:470,y:77});
coordsb.push({x:471,y:78});
coordsb.push({x:472,y:80});
coordsb.push({x:473,y:80});
coordsb.push({x:474,y:81});
coordsb.push({x:475,y:82});
coordsb.push({x:476,y:83});

var xcoordb =coordsb[0].x;
var ycoordb =coordsb[0].y;

if ( coordsb[0].x > storeList[0].x && storeList[0].x < coordsa[0].x )
{   
console.log("corrct");
}
else
{
console.log("wrong");
}

完全なコードを表示する必要がある場合は、以下のコードを参照してください。

<!DOCTYPE html>
   <html><head>
     <style>
       #contain {
          width: 500px;
         height: 120px;
         top : 15px;
         margin: 0 auto;
         position: relative;    
         }

         #layer1{background:url(http://docs.gimp.org/en/images/tutorials/straight-lines-6.png)} 
     </style>
  <script>
var touchList = [];
var storeList = [];
var checkList = [];
var check = 0;
    var currentPlates;
    var currentIndex = 0;
    var canvas;
    var ctx;
    var lastPt=null;
    var letsdraw = false;
    var offX = 440, offY = 25;


function init() {
    var touchzone = document.getElementById("layer1");
    touchzone.addEventListener("touchmove", draw, false);
    touchzone.addEventListener("touchend", end, false);
    ctx = touchzone.getContext("2d");
  }

  function draw(e) {
    e.preventDefault();
var selectedCoordinate = new Object();
selectedCoordinate.x = e.touches[0].pageX;
selectedCoordinate.y = e.touches[0].pageY;
touchList.push(selectedCoordinate);
//console.log("X: " + e.touches[0].pageX + " Y: " + e.touches[0].pageY);

    if (lastPt != null) {
    ctx.beginPath();
    ctx.moveTo(lastPt.x, lastPt.y);
    ctx.lineTo(e.touches[0].pageX - offX,
             e.touches[0].pageY - offY);
    ctx.stroke();
     }
    lastPt = {
         x: e.touches[0].pageX - offX,
         y: e.touches[0].pageY - offY
       };
    }

  function end(e) {

for(var i=0; i<touchList.length; i++)
{
storeList= touchList;
}
for(var i=0; i<touchList.length; i++)
{
console.log(storeList[i].x + " : " + storeList[i].y);
}


var coordsa=new Array(); 

coordsa.push({x:479,y:60});
coordsa.push({x:480,y:60});
coordsa.push({x:481,y:60});
coordsa.push({x:482,y:60});
coordsa.push({x:483,y:60});
coordsa.push({x:484,y:60});
coordsa.push({x:485,y:60});
coordsa.push({x:486,y:60});
coordsa.push({x:487,y:60});
coordsa.push({x:488,y:60});

var xcoorda =coordsa[0].x;
var ycoorda =coordsa[0].y;

var coordsb =new Array(); 

coordsb.push({x:467,y:74});
coordsb.push({x:468,y:75});
coordsb.push({x:469,y:75});
coordsb.push({x:470,y:77});
coordsb.push({x:471,y:78});
coordsb.push({x:472,y:80});
coordsb.push({x:473,y:80});
coordsb.push({x:474,y:81});
coordsb.push({x:475,y:82});
coordsb.push({x:476,y:83});

var xcoordb =coordsb[0].x;
var ycoordb =coordsb[0].y;

if ( coordsb[0].x > storeList[0].x && storeList[0].x < coordsa[0].x )
{   
console.log("corrct");
}
else
{
console.log("wrong");
}
var touchzone = document.getElementById("layer1");
e.preventDefault();
    //Terminate touch path
    lastPt = null;
    }

 function clear_canvas_width ()
  {
touchList = [];
    var s = document.getElementById ("layer1");
    var w = s.width;
    s.width = 10;
    s.width = w;
  }

    </script>    
 </head>

  <body onload="init()">

   <div id="contain">

     <canvas id="layer1" width="450" height="440" style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas> 

    </div>
     </body>
    </html>
4

1 に答える 1

0

coordsa と coordsb を組み合わせると、閉じた形状は次のようになります。

ここに画像の説明を入力

ユーザーがこのシェイプの内側に完全に触れているかどうかを確認するには、canvas のビルトイン ヒット テストを使用できます。

context.isPointInPath(TouchX,TouchY)

例: http://jsfiddle.net/m1erickson/bK8Ue/

于 2013-10-30T15:06:34.220 に答える