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); 

} 

}

これは、上記のコードの一部です。

上記のリンクは、最初のマップの例として取り上げられています。あなたが見ることができるように、2つの画像があります。最初に地図そのものです。最初のものは、プレイヤーがウェブからキャラクターを歪ませるためにクリックできる場所です。白い領域の外側をクリックすることは制限されていますが、問題はあまりにも白い色のイメージが透明でなければならないので、プレーヤーはsafeareaマップイメージなしで地図自体を見ることができるので、safezoneが何も起こらない場所のどこかをクリックしようとすると、特定のイベントをログに記録するので、x、y座標を引き続き使用することができます。

再び、固有のセーフゾーンでそれぞれ固有の12個の合計マップがあります。

誰も私がこれを整理するのを助けることができますか？本当にありがとう。

Answer 1

私はあなたが求めているものが何であるかわかりませんが、私が理解しているように、ユーザーがあなたの「セーフエリア」画像から白いピクセルをクリックしたかどうかを知りたいと思っています。

これを行うには、起動時にセーフエリアのimageDataを保存し、座標x yのピクセルが白（255,255,255,255）の場合は、このimageDataのデータをチェックインする必要があります。

注：角度コードを機能させることができなかったため、書き直しました。

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>