如何使用点击事件检测画布上的对象答案

【问题标题】：How to detect objects on the canvas with click event如何使用点击事件检测画布上的对象
【发布时间】：2017-11-16 13:59:07
【问题描述】：

您好，我正在使用哈希图，它可以让我有效地检测给定坐标中的对象。但是它工作得很好，问题在于使用鼠标将鼠标在画布内的位置收集到像素。我一直在为事件使用 offsetX 和 offsetY 方法来收集一些偏移量，但似乎有一个我不知道的偏移量，并且可能与其中任何一个有关：

1.在画布上使用缩放，注意：我试图通过分割渲染比例来解决这个问题，这适用于其他一切，所以在这里应该没问题。

mouseoffset 不考虑页面的某些部分，或者在低级别（可能 20）处丢失像素，但除以大量的渲染比例。

3.我正在使用笛卡尔坐标系来简化未来的事情，所以游戏地图是笛卡尔坐标，可能与问题有关。

我不会提供所有代码，因为完成这一切的工作量很大，所以我将提供以下内容：

html/css 画布代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Game</title>
</head>
<body onload="jsEngine = new JsEngine(24, 24, .1); " >


<div class ="wrapper">
    <canvas  id="canvas" width="1920" height="1080"></canvas>
</div>


<style>



    .wrapper { 
    position: relative;
    width: auto;
    height: 900px;
    }


    .wrapper   canvas {
       position: absolute;
       left: 90px;
       top: 50px;
       padding-left: 0;
       padding-right: 0;
       margin-left: auto;
       margin-right: auto;
       display: block;
       width: 90%;
       height: 90%;}

   .GUI{
       top: -315px;
       left: -302px;
       position: absolute;
       width: 300px;
       height: 300px;
       background-color: cadetblue;

       opacity: .5;
       word-wrap: break-word;}



    img{
         image-rendering: optimize-contrast;
}
</style>


<div id = GUI class = "GUI"></div>







    <!-- Libraries -->
<script src="../myapi/JSONE.js"></script>
<script src="../myapi/engine/SpacialHash.js"></script>






</body>
</html>

2.javascript点击功能

  //Click on objects
let onClick = function(event){
    let canvas_ctx = document.getElementById("canvas").getContext("2d");
let canvasOffsetX = canvas_ctx.canvas.width/2;
let canvasOffsetY = canvas_ctx.canvas.height/2;
let mousePosX = event.clientX;
let mousePosY = event.clientY;

    let mouseX =jsEngine.cameraFocus.x-canvasOffsetX/jsEngine.renderScale+(mousePosX)/jsEngine.renderScale;
    let mouseY = jsEngine.cameraFocus.y+(canvasOffsetY)/jsEngine.renderScale+((-mousePosY)/jsEngine.renderScale);
    console.log("sum to",mouseX,mouseY);





//My hashMap to place the mouse coordinates on the game map
    let clickPosition = hm.find({x:mouseX,y:mouseY,width:1,height:1});



    if(clickPosition.length===1){
        let gameObject = jsEngine.gameObjects[clickPosition[0].range.id];
        //console.log(gameObject.transform.x,gameObject.transform.y,mouseX,mouseY);
        let clickBox = {};
        let picture = gameObject.texture;
        guiCreateClickBox(clickBox,gameObject.id,1200,500,picture);

    }else if(clickPosition.length>1) {
        for (let i = 0; i < clickPosition.length; i++) {
            let gameObject = jsEngine.gameObjects[clickPosition[i].range.id];
            if (gameObject instanceof PlayerShip|| gameObject instanceof Bullet)
                continue;
            let clickBox = {};
            let picture = gameObject.texture;
            guiCreateClickBox(clickBox,gameObject.id,1200,500,picture);

            //console.log(gameObject.transform.x,gameObject.transform.y,mouseX,mouseY)

        }
    }
};

// Listeners
//Click on objects
document.getElementById("canvas").addEventListener("click", onClick);

地图和比例的制作：注意：这是通过onPreRender完成的

function drawBackground(canvas_ctx, renderScale, imageResource) {
let img = imageResource.mapBackground;
let mapWidth = 1000000;
let mapHeight= 1000000;
let zoom = 1;

mapWidth *= renderScale / zoom;
mapHeight *= renderScale / zoom;

// Render the Background
canvas_ctx.fillStyle = canvas_ctx.createPattern(img, 'repeat');
canvas_ctx.scale(zoom, zoom);
canvas_ctx.fillRect(-mapWidth / 2, - mapHeight / 2, mapWidth, mapHeight);

//if (jsEngine.cameraFocus.x > 1000000) {}

canvas_ctx.scale(1/zoom, 1/zoom);
}

用于播放的渲染方法

renderGameObject(gameObject) {
let x = gameObject.transform.x * this.renderScale;
let y = -(gameObject.transform.y * this.renderScale);
let rotation = Math.radians(gameObject.transform.rotation);
let width = gameObject.transform.width;
width *= this.renderScale;
let height = gameObject.texture.height;
height *= this.renderScale;

// Render the gameObject
this.canvas_ctx.translate(x, y);
this.canvas_ctx.rotate(rotation);
this.canvas_ctx.drawImage(gameObject.texture, 0, 0, width / this.renderScale, height / this.renderScale,  // Make sure the image is not cropped
    -width/2 ,         // X
    -height/2 ,        // Y
    width, height);     // width and height
this.canvas_ctx.rotate(-rotation);
this.canvas_ctx.translate(-x, -y);


}

要解决的问题是，当您单击画布的任何给定象限时，它将返回 -+ 左上角、-- 左下角、-+ 右上角、+- 右下角，以及被应用到目前为 0.1 的渲染比例，因此只需将鼠标和画布坐标分开，如上所示，您应该能够获得相同的结果。

注意事项：

jsEngine.cameraFocus 设置为玩家船的 x 和 y 坐标（在地图上设置为 0,0 位置）（也在船的中间）
李>
画布的左上角仍为 0,0，++ 仍朝向右下角，因此理论上减去画布宽度/高度的一半，然后添加偏移量 X 和 Y。这应该可以工作，但在我的地图坐标 -4000,-4000 我得到 ~-3620,-3295 和 +4000,+4000 我得到 3500,3500。（画布0,0之所以不在船所在的位置，是为了让船在屏幕中间）

如果您对需要提供的代码有任何疑问，请通过评论询问。请注意，如果您对提供的代码格式有疑问，我对此无话可说。我所需要的只是在我以笛卡尔格式设置的画布模型上工作的点击功能。

ps：jQuery 不是一个解决方案，它是一个问题，请使用 vanilla js。

【问题讨论】：

标签： javascript css html canvas mouseevent

【解决方案1】：

我发现它为什么关闭了，我的画布有 90 像素和 50 像素的偏移，主要问题是画布只有原始大小的 90%（也在 css 中）。如果有人可以帮助我如何适应这些问题，请在评论中回复。在那之前我相信我已经解决了我自己的问题。

【讨论】：