个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:38:24 26 4
gpt4 key购买 nike

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

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

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

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

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

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

  1. 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);
    }

  2. 用于玩家的渲染方法

    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 坐标分开，如上所示，您应该能够获得相同的结果。

注意事项:

  1. jsEngine.cameraFocus 设置为玩家飞船的 x 和 y 坐标(设置为 map 上的 0,0 位置)(也在飞船的中间)

    <

  2. 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/

26 4 0
文章推荐： c++ - 记分卡刽子手。 C++
文章推荐： html - 模板解析错误
文章推荐： javascript - 在更改图像 src 时提供 fadeIn fadeOut 效果
文章推荐： css - p-datatable rowStyleClass 不会为每一行设置样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com