0

我想跟踪用户的绘图线在 2 组数组值之间，例如我在画布中心绘制了一条线，我设置了 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，得到的封闭形状看起来像这样：

在此处输入图像描述

要查看用户是否完全触摸此形状，您可以使用画布的内置命中测试

context.isPointInPath(TouchX,TouchY)

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

于 2013-10-30T15:06:34.220 回答