Question

您好我正在使用一个hashmap，它允许我有效地检测给定坐标中的对象。然而，它工作得很好，问题在于使用鼠标将画布中的鼠标位置收集到像素。我一直在使用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);


}

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

要记住的事情：

jsEngine.cameraFocus设置为球员x和y坐标（在地图上设置为0,0位置）（也在船的中间）
画布的左上角仍然是0,0而++仍然是向右下方所以理论上缩小画布宽度/高度的一半然后添加偏移X和Y.这应该可以工作但是在我的地图坐标-4000，-4000我得〜-3620，-3295和+ 4000，+ 4000我得到3500,3500。（帆布0,0不是船的位置的原因是为了使船在屏幕中间）

如果您对基于需要提供的代码的任何内容有疑问，请通过评论询问。请注意，如果您提供的代码格式有问题，我无话可说。我需要的只是在我用笛卡尔格式设置的画布模型上的click函数。

ps：jQuery不是解决它的问题，请使用vanilla js。

Answer 1

我发现它为什么关闭，我的画布有90 px和50 px的偏移以及画布仅占其原始尺寸的90％（也在css中）的主要问题。如果有人可以帮我解决这些问题，请回复评论。直到那时我才相信我已经解决了自己的问题。

如何使用单击事件

1 个答案: