时间戳

首页 > 解决方案 > Bootstrap 模式中的画布给了我错误的鼠标坐标

javascript - 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, 0, 0, w, h);
        
        rectangulize_with_IDs();
        fillarraywithrandomTiles(soldTiles);

        //greyscaleOriginal();
        //ctx.drawImage(imgObj, dx, dy);
        //ctx.drawImage(imgObj, dx, dy, dw, dh);
        //ctx.drawImage(imgObj, sx, sy, sw, sh, dx, dy, dw, 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>

标签： javascripthtmlbootstrap-4html5-canvasmouse

解决方案

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

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

.modal-dialog {
    position: unset;
}

.modal-content {
    position: unset;
}

.modal-body {
    position: unset;
}

.alert {
    position: unset;
}

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

推荐阅读