Блог

Я пытаюсь понять, что я делаю неправильно. У меня есть холст hmtl5 внутри модального режима начальной загрузки. Холст — это игра выбора, в которой вы выбираете объекты внутри холста и манипулируете ими.

К сожалению, он работает нормально в центре холста размером 600×600 пикселей, но я получаю странное смещение, когда пытаюсь получить координаты в углу изображения. Смещение увеличивается по мере приближения к углам

Вот мой код.

Заранее большое вам спасибо!

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>
 

Я обнаружил проблему после того, как столкнулся с той же проблемой. Это потому, что class .modal-dialog и каждый подкласс под ним имеют относительное расположение. просто установите для позиционирования значение unset, и вы получите правильные координаты.

в моем случае мне пришлось изменить следующие классы:

 .modal-dialog {
    position: unset;
}

.modal-content {
    position: unset;
}

.modal-body {
    position: unset;
}

.alert {
    position: unset;
}
 

Если вы хотите, вы можете делать css-вещи, такие как «просто измените положение модального тела внутри модального диалога», чтобы вы больше ничего не испортили 🙂