Javascript Canvas 复杂性

Question

我正在尝试将游戏中的 GPS map 系统复制到网络中。基本上游戏中有 12 张 map ，每张 map 都有不同的安全区域，你可以在其中扭曲你的 Angular 色或走动，但我一路上遇到了一些问题。

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

}

}

这是上面代码的一部分。

以上链接以第一张 map 为例。正如您所看到的，有 2 个图像，第一个是 map 本身，第一个图像上的第二个图像是玩家应该能够从网络上单击以扭曲其 Angular 色的位置，在白色区域之外单击是受到限制的，但这里是还有一个问题，白色的图像应该是透明的，所以玩家只能看到 map 本身，而没有安全区域 map 图像，所以如果他尝试单击安全区域之外的其他地方，则不会发生任何事情，否则现在打印控制台。记录特定事件，以便我可以获取 x,y 坐标以供进一步使用。

再说一次，总共有 12 张 map ，每张 map 都是独一无二的，并且都有一个独特的安全区。

谁能帮我解决这个问题吗？非常感谢。

Answer 1

我不确定我是否完全得到了您的要求，但根据我的理解，您想知道用户是否单击了“安全区域”图像中的白色像素。

为此，您只需在启动时保存安全区域的 imageData，然后检查此 imageData 的数据(如果坐标 x y 处的像素为白色(255, 255, 255, 255))。

注意:我无法使您的 Angular 代码正常工作，因此我重写了它。

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>