자바 스크립트 캔버스의 복잡성

Question

게임에서 웹으로 GPS지도 시스템을 복제하려고합니다. 기본적으로 게임에 12 개의 맵이 있습니다. 각 맵에는 캐릭터를 왜곡하거나 이동시킬 수있는 다른 세이프 에바가 있지만 길을 따라 가면서 몇 가지 문제가 있습니다.

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

} 

Check it here

}

이 상기 코드의 일부이다.

위 링크는 첫 번째지도의 예입니다. 보시다시피 두 개의 이미지가 있습니다. 첫 번째는지도 자체이고 두 번째 이미지는 플레이어가 웹에서 캐릭터를 뒤틀기 위해 클릭 할 수 있어야하고, 흰색 영역 바깥 쪽을 클릭하면 제한되지만 여기에 있습니다. 또한 문제는 흰색 색상의 이미지가 투명해야하므로 플레이어는 안전 영역 맵 이미지가없는지도 자체 만 볼 수 있으므로 안전 영역에서 아무 것도 허용하지 않는 곳에 다른 곳을 클릭하려고하면 콘솔이 표시됩니다. 로그를 특정 이벤트와 함께 사용하면 x, y 좌표를 추가로 사용할 수 있습니다.

다시 말해, 고유 한 세이프 존을 사용하여 각각 고유 한 12 개의 합계 맵이 있습니다.

누구든지 나를 해결할 수 있습니까? 감사합니다.

Answer 1

나는 당신이 요구하고있는 것이 확실하지는 않지만, 사용자가 "안전 영역"이미지에서 흰색 픽셀을 클릭했는지 알고 싶습니다.

이렇게하려면 시작시 안전 영역의 imageData를 저장 한 다음 좌표 xy의 픽셀이 흰색 (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>