Javascript帆布的複雜性

Question

我試圖從遊戲中複製一個GPS地圖系統到網絡中。基本上游戲中有12張地圖，每張地圖都有不同的安全區域，可以讓你的角色翹曲或走開，但我在這個過程中遇到了一些問題。

Check it here

function ntGps($timeout) { 
return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     ntMap: '@', 
     ntX: '@', 
     ntY: '@' 
    }, 
    template: '<div class="nt-gps"><div class="nt-content"></div></div>', 
    link: link 
}; 

function link(scope, el) { 
    var q = el[0].querySelector("div.nt-content"), 
     m = new Image(), 
     a = new Image(), 
     c = document.createElement("canvas"); 

    m.src = "http://i.imgur.com/vD9jua7.png"; 
    a.src = "http://i.imgur.com/AU2peAy.png"; 

    scope.$watch(e, l); 

    function e() { 
     return el[0].clientWidth; 
    } 

    function l(s) { 
     var x, y; 

     scope.style = { 
      'width': s + "px", 
      'height': s + "px" 
     }; 


     c.width = s; 
     c.height = s; 

     m.onload = _d; 

     if (m.complete) { 
      _d(); 
     } 

     function _d() { 
     var _c = c.getContext("2d"), 
         _x = Math.floor((s * scope.ntX)/256, 10) + 4, 
         _y = Math.floor((s * scope.ntY)/256, 10) + 4; 

        _c.drawImage(a, 0, 0, 512, 512, 50, 50, s - 100, s - 100); 



        _c.globalCompositeOperation = "lighten"; 

        _c.drawImage(m, 0, 0, 512, 512, 0, 0, s, s); 


        c.addEventListener("click", function(e) { 
         // console.log(_c.getImageData(0, 0, 1, 1)); 
         var clickedX = e.pageX - this.offsetLeft; 
         var clickedY = e.pageY - this.offsetTop; 

         console.log(e); 
        }); 
     } 
    } 

    q.appendChild(c); 

} 

}

這是上面的代碼的一部分。

以上鍊接作爲第一張地圖的示例。正如你所看到的，有兩個圖像，第一個是地圖本身，第二個是第一個圖像，玩家應該可以通過點擊來從網絡中歪曲角色，點擊白色區域以外的地方是受限制的，但是這裏是也是一個問題，即白色圖像應該是透明的，所以玩家只能在沒有safearea地圖圖像的情況下才能看到地圖，所以如果他嘗試點擊safezone允許的任何地方以外的其他地方，否則現在打印控制檯。記錄具體事件，以便我可以將x，y座標進一步使用。

因此，再次，有12個總計地圖每一個獨特的安全區。

任何人都可以幫我解決這個問題嗎？非常感謝。

Answer 1

我不確定我是否很好地接受了你的要求，但是從我的理解中，你想知道用戶是否從你的「安全區域」圖像中點擊了一個白色像素。

爲此，只需在啓動時保存安全區域的imageData，然後檢查此imageData的數據（如果座標x y處的像素爲白色（255,255,255,255））。

注：我無法讓你的角碼工作，所以我重寫它。

var ctx = canvas.getContext('2d'); 
 
var s = canvas.width = canvas.height = 457; 
 

 
var data; // here we will store our safe area's imageData 
 

 
function isSafeArea(x, y) { 
 
    // flatten our coordinates (y * w + x) & multiply by 4 (4 slots per pixels) 
 
    // (canvas.width * y + x) * 4 
 
    // or bitwise shift 
 
    var flattened = (canvas.width * y + x) << 2; 
 
    // here we can just check for alpha value since it's either transparent or white, 
 
    // I set the threshold a bit low in case of antialiasing, but you can be more strict 
 
    return data[flattened + 3] > 125; 
 
} 
 

 
var safeArea = new Image(); 
 
// when it has loaded, save its image data 
 
safeArea.onload = initSafeArea; 
 
// we need it to not taint our canvas, so we'll use a proxy here 
 
safeArea.crossOrigin = 'anonymous'; 
 
safeArea.src = "https://crossorigin.me/http://i.imgur.com/AU2peAy.png"; 
 

 
var shownMap = new Image(); 
 
shownMap.onload = function() { 
 
    if (data) // if we already initialised the safeArea 
 
    draw() 
 
}; 
 
shownMap.src = "http://i.imgur.com/vD9jua7.png"; 
 

 
function initSafeArea() { 
 
    ctx.drawImage(this, 0, 0, 512, 512, 50, 50, s - 100, s - 100); 
 
    data = new Uint32Array(ctx.getImageData(0, 0, canvas.width, canvas.height).data); 
 
    if (shownMap.naturalWidth) { 
 
    draw(); 
 
    } 
 
    canvas.addEventListener("mousemove", onmousemove); 
 
} 
 

 
function draw() { 
 
    ctx.drawImage(shownMap, 0, 0, 512, 512, 0, 0, s, s); 
 
    if (toggle.checked) { 
 
    ctx.drawImage(safeArea, 0, 0, 512, 512, 50, 50, s - 100, s - 100); 
 
    } 
 
} 
 
var peg = new Image(); 
 
peg.src = "https://maps.gstatic.com/tactile/pegman_v3/default/runway-1x.png"; 
 

 
var clickedX, clickedY, 
 
    moving = false; 
 
function handleMoveMove(){ 
 
    moving = false; 
 
    draw(); 
 
    if(isSafeArea(clickedX, clickedY)){ 
 
    canvas.style.cursor = 'none'; 
 
    ctx.drawImage(peg, 0,0, 28, 28, clickedX-14, clickedY-14, 28, 28) 
 
    } 
 
    else{ 
 
    canvas.style.cursor = 'default'; 
 
    } 
 
    } 
 
// I changed the event so I debounce it 
 
function onmousemove(e) { 
 
    clickedX = e.pageX - this.offsetLeft; 
 
    clickedY = e.pageY - this.offsetTop; 
 
    if(!moving){ 
 
    requestAnimationFrame(handleMoveMove); 
 
    } 
 
    moving = true; 
 
} 
 
toggle.onchange = draw;

<label>show the safe area : 
 
    <input type="checkbox" id="toggle"> 
 
</label> 
 
<br> 
 
<canvas id="canvas"></canvas>