使用isPointInPath（）和響應式設計的多畫布多邊形檢測映射

Question

我有一個正確繪製的畫布對象數組。我有三個問題：

1. 偏移。我已經在JS小提琴中測試了下面的代碼，它可以工作，但是當我將它導出到我的網頁時，變量會發生偏斜。檢測發生，但沒有在正確的地方。頁面寬度在CSS中設置，實際畫布區域使用margin：0自動調用居中，但是它小於頁面寬度。

<canvas id="canvas" width="780" height="690" style="position:absolute;"></canvas> 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var $canvas = $("#canvas"); 
var canvasOffset = $canvas.offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var scrollX = $canvas.scrollLeft(); 
var scrollY = $canvas.scrollTop(); 

var $results = $("#results"); 

// define the polygon items 
var polyArray = new Array (6); 
polyArray [0] =[{x:50,y:236}, {x:200,y:115}, {x:350,y:50}, {x:350,y:300}, {x:232,y:325}, {x:75,y:300}]; 
polyArray [1] =[{x:350,y:55}, {x:350,y:300}, {x:510,y:300}, {x:510,y:205}, {x:578,y:172}, {x:690,y:96}, {x:650,y:17}]; 
polyArray [2] =[{x:510,y:300}, {x:510,y:200}, {x:715,y:113}, {x:780,y:200}, {x:780,y:485}, {x:625,y:468}, {x:605,y:456}, {x:605,y:428}]; 
polyArray [3] =[{x:0,y:446}, {x:284,y:320}, {x:255,y:540}, {x:240,y:566}, {x:73,y:600}, {x:0,y:565}]; 
polyArray [4] =[{x:355,y:305}, {x:510,y:305}, {x:604,y:423}, {x:604,y:460}, {x:628,y:484}, {x:610,y:513}, {x:587,y:468}, {x:537,y:426}, {x:500,y:400}, {x:447,y:424}, {x:312,y:365}, {x:307,y:314 }]; 
polyArray [5] =[{x:350,y:425}, {x:415,y:421}, {x:455,y:434}, {x:495,y:411}, {x:550,y:444}, {x:618,y:590}, {x:570,y:616}, {x:359,y:597}, {x:333,y:522}]; 

// call the function to draw all the objects in the array 
define(polyArray); 
// call through the array to draw the objects 
function define(polygon) { 
    ctx.beginPath(); 
    for (var i = 0; i < polygon.length; i++) { 
     ctx.moveTo(polygon[i][0].x, polygon[i][0].y); 
     for (var j = 1; j < polygon[i].length; j++) { 
      ctx.lineTo(polygon[i][j].x, polygon[i][j].y); 
     } 
     ctx.fill(); 
    } 
    ctx.closePath(); 

} 
function hitTest(polygon) { 
    // redefine the polygon 
    define(polygon); 
    // ask isPointInPath to hit test the mouse position 
    // against the current path 
    return (ctx.isPointInPath(mouseX, mouseY)); 
} 

function handleMouseMove(e) { 
    e.preventDefault(); 
    mouseX = parseInt(e.clientX - offsetX); 
    mouseY = parseInt(e.clientY - offsetY); 

    // check if the mouse is inside the polygon 
     var isInside = hitTest(polyArray); 
     if (isInside) { 
      canvas.style.cursor = 'pointer'; 
      $results.text("Mouse is inside the area); 
     } else { 
      canvas.style.cursor = 'default'; 
      $results.text("Outside"); 
     } 
} 
$("#canvas").mousemove(function (e) { 
    handleMouseMove(e); 
}); 

檢測該對象已被懸停。需要發生什麼是懸停的一個陣列形狀應該影響一些CSS/JS。我如何分配ID變量並檢測它？

當我將響應式設計帶入方程時，我有點卡住瞭如何合併這個偏移量和聚合度來適當縮放。

任何一點在正確的方向將不勝感激。

Answer 1

問題1：獲取準確的鼠標的位置，畫布移動

當你移動畫布（FEX：margin: 0 auto）後，必須重新計算offsetX和offsetY值：

如果手動更改canvas元素的CSS（fex：canvas.style.margin='50px'裏面的JavaScript），那麼你還必須手動調用reOffset()。

// cache the canvas's offset positions since the 
// offset positions are used often 
var offsetX,offsetY; 

// call this once at the beginning of your app 
// and whenever you change the canvas's position on the page 
// (eg call when you change margins, scroll, etc) 
function reOffset(){ 
    var BB=canvas.getBoundingClientRect(); 
    offsetX=BB.left; 
    offsetY=BB.top;   
} 

// have the browser auto-reset offsetX & offsetX when 
// the viewport scrolls or resizes 
window.onscroll=function(e){ reOffset(); } 
window.onresize=function(e){ reOffset(); } 

問題＃2檢測懸停&模糊了你的多邊形

你hitTest功能將測試如果鼠標是目前指定的多邊形內部。因此，在handleMousemove內，您可以撥打hitText獲取polyArray中的每個多邊形。

保留一個標誌變量，指出鼠標最後一個多邊形的索引號（或-1，表示鼠標位於所有多邊形之外）當您的標誌變量值更改時，您知道已經存在懸停事件或模糊的事件。比較過去和當前的標誌變量來確定哪些多邊形正在徘徊或模糊。

問題3包含一個響應式設計

鼠標座標瀏覽器上報到e.clientX和e.clientY總是處於相對於瀏覽器視口的非縮放值

所以，如果你：

• 點擊鼠標和使用e.clientX/E。clientY來確定鼠標是在[100,100]，
• Scale的帆布：context.scale（2,2），
• 並且在不偏離其原始[100100]位置移動鼠標reclick，

然後：

使用e.clientX/e.clientY檢測鼠標座標，即使畫布已縮放並且鼠標相對於縮放畫布的[200,200]仍將報告位置爲[100,100] 。

的修復：

您必須調整瀏覽器的報告的鼠標位置相匹配的畫布的比例因子：

// Determine how much you want to scale the canvas 
var scaleFactor=2.00; 

// scale the canvas 
context.scale(scaleFactor,scaleFactor); 

// also scale the mouse position reported by the browser 
mouseX=parseInt(e.clientX-offsetX)*scaleFactor; 
mouseY=parseInt(e.clientY-offsetY)*scaleFactor;