Question

我想跟踪用户的绘图线是在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>

Answer 1

如果你结合你的coordsa＆amp; coordsb，由此产生的封闭形状如下：

enter image description here

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

context.isPointInPath(TouchX,TouchY)

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

如何比较绘制线是在2组数组值之间

1 个答案: