javascript - 如何使用点击事件检测 Canvas 上的对象

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

1.在 Canvas 上使用缩放，注意:我试图通过划分渲染比例来解决这个问题，这适用于其他所有东西，所以在这里应该没问题。

mouseoffset 没有考虑到页面的某些部分，或者缺少较低级别(可能是 20)的像素，但除以很大的渲染比例。

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

我不会提供所有代码，因为完成所有代码需要大量工作，所以我将提供以下代码:

html/css Canvas 代码

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

map 和比例尺的制作:注意:这是通过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);


}

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

注意事项:

jsEngine.cameraFocus 设置为玩家飞船的 x 和 y 坐标(设置为 map 上的 0,0 位置)(也在飞船的中间)
<
Canvas 的左上角仍然是 0,0 并且++ 仍然朝向右下角所以理论上减去 Canvas 宽度/高度的一半然后添加偏移量 X 和 Y。这应该可以工作但是在我 map 坐标 -4000,-4000 我得到 ~-3620,-3295，在 +4000,+4000 我得到 3500,3500。 (之所以canvas 0,0不是ship所在的位置，是为了让ship在屏幕中间)

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

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

最佳答案

我发现它关闭的原因，我的 Canvas 有 90 px 和 50 px 的偏移量，主要问题是 Canvas 只有其原始大小的 90%(在 css 中也是如此)。如果有人可以帮助我解决这些问题，请在评论中回复。直到那时我相信我已经解决了我自己的问题。

关于javascript - 如何使用点击事件检测 Canvas 上的对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47298641/

javascript - 如何使用点击事件检测 Canvas 上的对象

上一篇：css - p-datatable rowStyleClass 不会为每一行设置样式

下一篇：jQuery平滑滚动bug双击等