如何比較畫線是否在2組數值之間

我想跟蹤用戶的畫線是在2組數組值之間，比如我在畫布中心畫了一條線，我已經設置了2組帶有x和y座標的數組對象。我怎麼能得到x和y座標與我的數組比較。如果該行不在2組數組之間，則顯示答案錯誤。請幫助如何比較畫線是否在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>

來源

2013-10-30 user2913749

你能解釋一下嗎？特別是'兩行數組之間的一條線'對我來說有點神祕...... – GameAlchemist

我有一個背景圖像（一行），我會要求用戶在圖像後面畫一條線（一行）。我如何知道圖形是否不符合圖像圖像。 – user2913749

在畫布上繪製一條線。然後用戶必須遵循最接近可能的路線。當他（她）距離最近的部分太遠，或者如果他們繼續太遠（如果你累積了錯誤），那麼結果將是：失敗。如果他們從最後一點開始沒有失敗，結果就是通過。 ?? – GameAlchemist

如果你把你的coordsa & coordsb，所產生的閉合形狀看起來像這樣：

enter image description here

要查看用戶是否完全觸及此形狀，可以使用畫布的內置撞擊測試

context.isPointInPath(TouchX,TouchY)

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

來源

2013-10-30 15:06:34 markE

對於我的情況，我想看看用戶是否按照背景圖繪製。如果我只找到一個區域，那就不太準確。例如，我有一個背景圖片（一行），我會要求用戶在圖片後面畫一條線（一行）。我如何知道用戶的繪圖是否超出形狀（線條）或不跟隨圖像。 – user2913749

在您希望用戶保留的區域周圍繪製路徑，然後使用isPointInPath進行命中測試。如果isPointInPath返回False，則用戶已經離開了您想要的區域。這是一個小提琴，顯示單線和圍繞該線的邊界框。如果用戶曾經拖出邊界框，那麼他們是「錯誤的」：http://jsfiddle.net/m1erickson/bPpy2/ – markE

這條線是曲線嗎？我應該使用什麼方法？ – user2913749

如何比較畫線是否在2組數值之間

回答

相關問題