Bootstrap 模式中的画布给了我错误的鼠标坐标

问题描述

我想弄清楚我做错了什么。我在引导模式中有一个 hmtl5 画布。画布是一种选择游戏，您可以在画布内选择对象并对其进行操作。

不幸的是，它在 600x600px 画布的中心工作正常，但是当我试图获取图片角落的坐标时，我得到了一个奇怪的偏移量。越靠近拐角，偏移量越大

这是我的代码。

在此先非常感谢您！

Javascript：

document.addEventListener('DOMContentLoaded',(ev) => {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    canvas.width = 600;
    canvas.height = 600;


    let imgObj = new Image();

    imgObj.onload = function() {
        let w = canvas.width;
        let nw = imgObj.naturalWidth; //1350
        let nh = imgObj.naturalHeight; //900
        console.log(nw);
        console.log(nh);
        let aspect = nw / nh;
        let h = w / aspect;
        console.log('height',h)
        canvas.height = h;
        soldTilesdisplay.textContent = totalTiles-soldTiles;
        ctx.drawImage(imgObj,w,h);
        
        rectangulize_with_IDs();
        fillarraywithrandomTiles(soldTiles);

        //greyscaleOriginal();
        //ctx.drawImage(imgObj,dx,dy);
        //ctx.drawImage(imgObj,dy,dw,dh);
        //ctx.drawImage(imgObj,sx,sy,sw,sh,dh);
    };

    function getMousePosition(canvas,event) {
        let rect = canvas.getBoundingClientRect();
        
        let x = event.clientX - Math.floor(rect.left);
        let y = event.clientY - Math.floor(rect.top); 
        
        storePixelArray(x,y);  // originale "Store in Array funktion"
        store_rect(x,y);
        clickcounter = clickcounter + 1;
        console.log("Exact Coordinates: X: " + x," Y: " + y,"CLick Counter: "+ clickcounter);
        }

HTML：

<div>
    <!-- Bootstrap Modal here!-->
    <div class="row">
        <div class="col-lg-4">

            <!-- Bootstrap Modal here!-->
            <div class="modal fade" id="myModal1">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h3>WIN!</h3>
                        </div>

                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="row">

                                    <div class="col-md-6">

                                        <canvas id="canvas" style="background-image: url('/images/Berge.png')"></canvas>


                                    </div>

                                    <div class="col-md-6 justify-content-center">

                                        <div class="card text-center" style="width: 30rem;">
                                            <div class="card-body">
                                                <h5 class="card-title" id="Punktestand"> Card Title
                                                    score:
                                                </h5>
                                                <p class="card-text" id="paragraphImModal">With supporting
                                                    text below as a natural
                                                    lead-in to additional content.</p>


                                                <button type="button" class="btn btn-default" id="usePointsPixelButton">
                                                    Select Pixel first</button>
                                                <br>

                                                <h5 class="selectedPixelAmount" id="AmountOfPixels"> </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Close</button>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

解决方法

我在遇到同样的问题后发现了这个问题。 这是因为类 .modal-dialog 及其下的每个子类都有一个相对定位。只需将定位设置为 unset 即可获得正确的坐标。

就我而言，我不得不更改以下课程：

.modal-dialog {
    position: unset;
}

.modal-content {
    position: unset;
}

.modal-body {
    position: unset;
}

.alert {
    position: unset;
}

如果你愿意，你可以做一些 css 的东西，比如“只需改变模态对话框中模态主体的位置”，这样你就不会搞砸其他任何事情:)