缩放/平移 HTML5 canvas 后获取正确的事件位置

Question

在缩放/拖动后，即使 position 也无法正确单击。

所以，我有这个 canvas 响应式（非常重要，我不能给 canvas 一个固定的宽度/高度）引导模式。 我还有一个带有坐标的对象列表，我想在 canvas 上绘制它。 我必须能够缩放这些对象并移动它们。 我还必须能够通过单击元素来 select 元素。 把它想象成一个非常简单的 map。

现在，经过一周的激烈谷歌搜索，我已经设法 plot 元素以及缩放和拖动它们。 我还通过单击原始 position 中的元素得到反应。 为此，我在主要的顶部使用第二个 canvas 并在那里绘制轮廓，所以我不必重新绘制所有元素，因为它们中可能有很多（请随意提出更好的解决方案）。

问题开始了，当我在缩放或拖动元素后尝试 select 和 object 时。 我在这里找到了很多很棒的答案，不幸的是，它们都没有奏效。 有一个我的 canvas 的插图，带有参考线和矩形，正好覆盖整个 canvas 的 1/4。 网格中的每个单元格都是 50 像素。

此外，这是相关的（而不是那么多）代码：

           // Map like in B-Tronic - on a black background
        $scope.openBAPSModal = function() {
            $scope.bapsModal.modal('show');

            $scope.canvas = document.getElementById('baps-canvas');
            $scope.context = $scope.canvas.getContext('2d');
            $scope.scanvas = document.getElementById('shadow-canvas');
            $scope.scontext = $scope.scanvas.getContext('2d');
            var boundingRect = $scope.canvas.getBoundingClientRect();

            console.log(boundingRect);
            
            $scope.origX = 0;
            $scope.origY = 0;

            $scope.canvasObj = [];
            
            $scope.canvas.width = document.documentElement.clientWidth * 0.5;
            $scope.canvas.height = document.documentElement.clientHeight * 0.5;
            $scope.scanvas.width = document.documentElement.clientWidth * 0.5;
            $scope.scanvas.height = document.documentElement.clientHeight * 0.5;
            $scope.INTERVAL = 300;

            $scope.canvasValid = false;
            $scope.zoom = 0;

            $scope.cameraOffset = { x: $scope.canvas.width/2, y: $scope.canvas.height/2 };
            $scope.cameraZoom = 1;
            $scope.MAX_ZOOM = 5;
            $scope.MIN_ZOOM = 0.1;
            $scope.SCROLL_SENSITIVITY = 0.0005;

            $scope.isDragging = false;
            $scope.dragStart = { x: 0, y: 0 };

            $scope.initialPinchDistance = null;
            $scope.lastZoom = $scope.cameraZoom;
            $scope.i = 0;

            const canvas = document.querySelector('canvas');
            
            $scope.elementList = {
    "layout_params": [
        {
            "name": "status",
            "unit": null,
            "order": null
        },
        {
            "name": "element_name",
            "unit": null,
            "order": null
        },
        {
            "name": "depth",
            "unit": "m",
            "order": 2
        },
        {
            "name": "diameter",
            "unit": "mm",
            "order": 3
        }
    ],
    "elements": [
        {
            "wb_element_id": 3860,
            "element_name": "Pfahl 1",
            "status": {
                "id": 1,
                "status_description": "",
                "comment": ""
            },
            "status_id": 1,
            "status_description": "",
            "comment": "",
            "selected": 0,
            "diameter": "60 mm",
            "northing": "4468390.983 m",
            "easting": "5335470.978 m",
        },
        {
            "wb_element_id": 3861,
            "element_name": "Pfahl 2",
            "status": {
                "id": 2,
                "status_description": "",
                "comment": null
            },
            "status_id": 2,
            "status_description": "",
            "comment": null,
            "depth": "10 m",
            "diameter": "50 mm",
            "northing": "4468391.048 m",
            "easting": "5335471.526 m",
        },
        {
            "wb_element_id": 3862,
            "element_name": "Pfahl 3",
            "status": {
                "id": 3,
                "status_description": "",
                "comment": null
            },
            "status_id": 3,
            "status_description": "",
            "comment": null,
            "depth": "6 m",
            "diameter": "30 mm",
            "northing": "4468391.114 m",
            "easting": "5335472.072 m",
        },
        {
            "wb_element_id": 3864,
            "element_name": "Pfahl 5",
            "status": {
                "id": 4,
                "status_description": "",
                "comment": null
            },
            "status_id": 4,
            "status_description": "",
            "comment": null,
            "depth": "4 m",
            "diameter": "10 mm",
            "northing": "4468391.234 m",
            "easting": "5335473.165 m",
        },
        {
            "wb_element_id": 3865,
            "element_name": "Pfahl 6",
            "status": {
                "id": 4,
                "status_description": "",
                "comment": ""
            },
            "status_id": 4,
            "status_description": "",
            "comment": "",
            "depth": "2 m",
            "diameter": "5 mm",
            "northing": "4468391.289 m",
            "easting": "5335473.713 m",
        },
        {
            "wb_element_id": 3866,
            "element_name": "Pfahl 4",
            "status": {
                "id": 4,
                "status_description": "",
                "comment": ""
            },
            "status_id": 4,
            "status_description": "",
            "comment": "",
            "depth": "21 m",
            "diameter": "20 mm",
            "northing": "4468391.179 m",
            "easting": "5335472.618 m",
        }
    ]
    }
};

            $scope.scanvas.addEventListener('mousedown', function(e){
                $scope.mouseDown = true;
                $scope.isDragging = true;
                var bounding = $scope.canvas.getBoundingClientRect();

                if($scope.cameraZoom > 1){
                    console.log('HELP!');
                    $scope.mouseDownX = (e.clientX - bounding.left);
                    $scope.mouseDownY = (e.clientY - bounding.top);
                }else{
                    $scope.mouseDownX = (e.clientX - bounding.left);
                    $scope.mouseDownY = (e.clientY - bounding.top);
                }
                
                $scope.mouseDownX /= bounding.width;
                $scope.mouseDownX *= $scope.canvas.width;

                $scope.mouseDownY /= bounding.height;
                $scope.mouseDownY *= $scope.canvas.height;
                
                $scope.dragStart.x = getCursorPosition(canvas, e).x/$scope.cameraZoom - $scope.cameraOffset.x;
                $scope.dragStart.x /= $scope.view_width;
                $scope.dragStart.x *= $scope.canvas.width;
                $scope.dragStart.y = getCursorPosition(canvas, e).y/$scope.cameraZoom - $scope.cameraOffset.y;
                
            });

            $scope.scanvas.addEventListener('mousemove', function(e){
                if($scope.mouseDown == true){
                    onPointerMove(e, $scope.isDragging, $scope.cameraOffset, $scope.cameraZoom, $scope.dragStart);
                    $scope.canvasValid = false;
                }
                
            }); 

            $scope.scanvas.addEventListener('mouseup', function(e){
                $scope.mouseDown = false;
                var bounding = $scope.canvas.getBoundingClientRect();

                const delta = 6;

                if($scope.cameraZoom > 1){
                    $scope.mouseUpX = ((e.clientX ) - bounding.left);
                    $scope.mouseUpY = ((e.clientY) - bounding.top);
                }else{
                    $scope.mouseUpX = (e.clientX - bounding.left);
                    $scope.mouseUpY = (e.clientY - bounding.top);
                }
                
                $scope.mouseUpX /= bounding.width;
                $scope.mouseUpX *= $scope.canvas.width;

                
                $scope.mouseUpY /= bounding.height;
                $scope.mouseUpY *= $scope.canvas.height;

                const diffX = Math.abs($scope.mouseDownX - $scope.mouseUpX);
                const diffY = Math.abs($scope.mouseDownY - $scope.mouseUpY);

                if(diffX < delta && diffY < delta){

                    const xclick = $scope.mouseDownX;
                    const yclick = $scope.mouseDownY; 

                    clickCircle(xclick , yclick);
                    
                }

                $scope.isDragging = false;
                $scope.canvasValid = true;
                $scope.initialPinchDistance = null;
                $scope.lastZoom = $scope.cameraZoom;
            })

            $scope.scanvas.addEventListener( 'wheel', (e) => adjustZoom(e.deltaY*$scope.SCROLL_SENSITIVITY));

            document.getElementById("zoom-in").addEventListener("click", function(){
                adjustZoom(0.2);
                $scope.zoom = $scope.zoom + 1;
            }, false);
         
            document.getElementById("zoom-out").addEventListener("click", function(){
                adjustZoom(-0.2);
                $scope.zoom = $scope.zoom - 1;
            }, false);

            

            canvas.addEventListener('mousedown', function(e) {
                getCursorPosition($scope.canvas, e)
            })
                // make draw() fire every INTERVAL milliseconds.
                if($('#baps-modal').is(':visible')){
                    //requestAnimationFrame( draw );
                    setInterval(draw, $scope.INTERVAL);
                }
                
        };

        function clickCircle(x_circle, y_circle){
            
            for(let i = 0; i < $scope.canvasObj.length; i++){

                let x = $scope.canvasObj[i].elem_x;
                let y = $scope.canvasObj[i].elem_y;
                let xclick = x_circle;
                let yclick = y_circle - $scope.canvasObj[i].elem_radius;
                let buffer = 0;
                 
                let distance = Math.sqrt(((xclick - x) * (xclick - x)) + ((yclick - y) * (yclick - y)));
                
                if($scope.canvasObj[i].elem_radius < 20){
                    buffer = 15;
                }
                if(distance < $scope.canvasObj[i].elem_radius + buffer){
                    
                    $scope.scontext.clearRect(0, 0 , $scope.scanvas.width, $scope.scanvas.height);

                    for(var k = 0; k < $scope.canvasObj.length; k++){
                        if($scope.canvasObj[k].elem_id == $scope.canvasObj[i].elem_id.toString()){
                            $scope.canvasValid = false;
                            $scope.canvasObj[i].elem_selected = true;
                            $scope.drawSelected($scope.canvasObj[k]);
                            $scope.canvasObj[i].elem_selected = false;
                            $scope.elementTable = document.getElementById($scope.canvasObj[k].elem_id);
                            $scope.elementTable.classList.add("selected-row");
                            $scope.elementTable.focus();
                            return;
                        } else{
                            $scope.canvasValid = true;
                        }
                    }
                    
                    return;
                }else{
                }
            }
        }

        function drawBoard(){

            var bw = $scope.canvas.width;
            // Box height
            var bh = $scope.canvas.height;
            // Padding
            var p = 10;
            $scope.context.lineWidth = 0.5;

            for (var x = 0; x <= bw; x += 50) {
                $scope.context.moveTo(x, 0);
                $scope.context.lineTo(x, bh);
            }

            for (var x = 0; x <= bh; x += 50) {
                $scope.context.moveTo(0, x);
                $scope.context.lineTo(bw, x);
            }
            $scope.context.strokeStyle = "black";
            $scope.context.stroke();
        }

        function draw(){
            if ($scope.canvasValid == false) {
            $scope.canvas.width = document.documentElement.clientWidth * 0.5;
            $scope.canvas.height = document.documentElement.clientHeight * 0.5;
            $scope.scanvas.width = $scope.canvas.width;
            $scope.scanvas.height = $scope.canvas.height;
            
            // Translate to the canvas centre before zooming - so you'll always zoom on what you're looking directly at
            
            $scope.context.translate($scope.canvas.width/2, $scope.canvas.height/2);
            $scope.scontext.translate($scope.scanvas.width/2, $scope.scanvas.height/2);

            // just a reference rectangle
            $scope.context.fillStyle = "#000080";
            $scope.context.fillRect(0, 0,$scope.canvas.width/2, $scope.canvas.height/2);

            $scope.context.scale($scope.cameraZoom, $scope.cameraZoom);
            //$scope.scontext.scale($scope.cameraZoom, $scope.cameraZoom);
            $scope.context.translate( -document.documentElement.clientWidth / 2 + $scope.cameraOffset.x, -document.documentElement.clientHeight / 2 + $scope.cameraOffset.y );
            $scope.scontext.translate( -document.documentElement.clientWidth / 2 + $scope.cameraOffset.x, -document.documentElement.clientHeight / 2 + $scope.cameraOffset.y );
            // another reference
            $scope.context.fillStyle = "#008000";
            $scope.context.fillRect(0, 0,$scope.canvas.width/2, $scope.canvas.height/2);
            
            $scope.rect = $scope.scanvas.getBoundingClientRect();
            let puffer = 0.25;

            let xMin = parseFloat($scope.elementList.baps.easting[0].min);
            let yMin = parseFloat($scope.elementList.baps.northing[0].min);

            let xMax = parseFloat($scope.elementList.baps.easting[0].max) - xMin + puffer;
            let yMax = parseFloat($scope.elementList.baps.northing[0].max) - yMin + puffer;

            $scope.elementList.elements.forEach(function(element){

                var elem_context = $scope.context = $scope.canvas.getContext('2d');
                
                $scope.diameter = parseInt((element.diameter).replace('mm', '').trim());
                var radius = ($scope.diameter / 2) * 0.5;
                let easting = 100 - (((parseFloat((element.easting).replace('m', '').trim()) - xMin) * 100) / xMax);
                let northing = ((parseFloat((element.northing).replace('m', '').trim()) - yMin) * 100) / yMax;
                $scope.fill = false;
                var elemx = parseInt((((easting * $scope.rect.width) / 100) * 0.5) + (($scope.rect.width) / 5));
                var elemy = parseInt((((northing * $scope.rect.height) / 100) * 0.5) + (($scope.rect.height) / 3));

                $scope.canvasObj.push({
                    elem_context: elem_context,
                    elem_id: element.wb_element_id,
                    elem_x: elemx,
                    elem_y: elemy,
                    elem_radius: radius,
                    elem_selected: false
                });

                switch(element.status_id) {
                    case 1:
                        $scope.fill = '#92D050';
                        break;
                    case 2:
                        $scope.fill = '#A6A6A6';
                        break;
                    case 3:
                        $scope.fill = '#FFC000';
                        break;
                    case 4:
                        $scope.fill = false;
                        break;
                }

               $scope.drawCircle(element.wb_element_id, elemx, elemy, radius, false);
               
               drawBoard();
               
            });
            $scope.canvasValid = true;
            console.log("id: " + $scope.canvasObj[0].elem_id + " Radius: " + $scope.canvasObj[0].elem_radius + " x: "+ $scope.canvasObj[0].elem_x + " y: "+ $scope.canvasObj[0].elem_y);
            
        }
    }

        $scope.drawSelected = function(selectedObj){
            var selected = true;
            this.selectedObj = selectedObj;

            if($scope.canvasValid == false && selected == true){
                $scope.scontext.strokeStyle = '#009900';

                $scope.scontext.beginPath();
                $scope.scontext.setLineDash([]);
                $scope.scontext.arc(selectedObj.elem_x, selectedObj.elem_y - 1, selectedObj.elem_radius, 0, 2 * Math.PI);
                $scope.scontext.lineWidth = 4;
            
                if($scope.fill){
                    $scope.scontext.fillStyle = $scope.fill;
                    $scope.scontext.fill();
                } 

                $scope.scontext.stroke();
                $scope.scontext.closePath();
                // -- Draws a dashed line from the centre of the element
                $scope.scontext.beginPath();
                //context.globalCompositeOperation='destination-under';
                $scope.scontext.setLineDash([6, 4]);
                $scope.scontext.moveTo(selectedObj.elem_x, selectedObj.elem_y);
                $scope.scontext.lineTo(selectedObj.elem_x, selectedObj.elem_y - 22);

                // -- Draws a text label with element id
                $scope.scontext.font = "bolder 15px Arial";
                $scope.scontext.textAlign = "center"; 
                $scope.scontext.globalCompositeOperation='destination-under'; // Forces text to draw on top
                $scope.scontext.textBaseline='middle';

                $scope.scontext.fillStyle = "#ff0000";
                $scope.scontext.fillText(selectedObj.elem_id, selectedObj.elem_x, selectedObj.elem_y - 25);

                $scope.scontext.stroke();
                $scope.scontext.closePath();
            }

            selected = false;
            $scope.canvasValid = true;

        }

        $scope.drawCircle = function(id, elemx, elemy, radius, selected){
            this.radius = radius;

            if($scope.canvasValid == false && selected == false){
                $scope.context.strokeStyle = '#ffffff';
                $scope.canvasValid == true;
                $scope.context.beginPath();
                $scope.context.setLineDash([]);
                $scope.context.arc(elemx, elemy, this.radius, 0, 2 * Math.PI);
                $scope.context.lineWidth = 2;
                
                if($scope.fill){
                    $scope.context.fillStyle = $scope.fill;
                    $scope.context.fill();
                } 

                $scope.context.stroke();
                $scope.context.closePath();
                // -- Draws a dashed line from the centre of the element
                $scope.context.beginPath();
                //context.globalCompositeOperation='destination-under';
                $scope.context.setLineDash([5, 5]);
                $scope.context.moveTo(elemx, elemy);
                $scope.context.lineTo(elemx, elemy - 20);

                // -- Draws a text label with element id
                $scope.context.font = "bolder 15px Arial";
                $scope.context.textAlign = "center"; 
                $scope.context.globalCompositeOperation='destination-under'; // Forces text to draw on top
                $scope.context.textBaseline='middle';

                $scope.context.fillStyle = "#ff0000";
                $scope.context.fillText(id, elemx, elemy - 25);

                $scope.context.stroke();
                $scope.context.closePath();

            }
        } 
 function getCursorPosition(canvas, event) {
            const rect = event.target.getBoundingClientRect()

            const x = event.clientX ;
            const y = event.clientY ;
            return {x: x, y: y};
        }

function onPointerDown(e)
        {
            isDragging = true
            dragStart.x = getEventLocation(e).x/cameraZoom - cameraOffset.x
            dragStart.y = getEventLocation(e).y/cameraZoom - cameraOffset.y
        }

        function onPointerUp(e)
        {
            isDragging = false
            initialPinchDistance = null
            lastZoom = cameraZoom
        }

        function onPointerMove(e)
        {
            if (isDragging)
            {
                cameraOffset.x = getEventLocation(e).x/cameraZoom - dragStart.x
                cameraOffset.y = getEventLocation(e).y/cameraZoom - dragStart.y
            }
        }

        function getEventLocation(e)
        {if (e.clientX && e.clientY)
            {
                return { x: e.clientX, y: e.clientY }        
            }
        }

        function onPointerMove(e, isDragging, cameraOffset, cameraZoom, dragStart){
            if (isDragging)
            {
                cameraOffset.x = getEventLocation(e).x/cameraZoom - dragStart.x
                cameraOffset.y = getEventLocation(e).y/cameraZoom - dragStart.y
            }
        }

    

        function adjustZoom(zoomAmount, zoomFactor)
        {
            if (!$scope.isDragging)
            {
                if (zoomAmount)
                {
                    $scope.cameraZoom += zoomAmount;
                    $scope.canvasValid = false;
                }
                else if (zoomFactor)
                {
                    $scope.cameraZoom = zoomFactor*lastZoom;
                    $scope.canvasValid = false;
                }
                
                $scope.cameraZoom = Math.min( $scope.cameraZoom, $scope.MAX_ZOOM );
                $scope.cameraZoom = Math.max( $scope.cameraZoom, $scope.MIN_ZOOM );
                
            }
        }

.modal-dialog {
     width: 80%;
     align-content: center;
     justify-items: center;
}
 .modal-dialog .modal-content {
     width: 70%;
}
 .modal-dialog .modal-content .modal-body {
     width: 100%;
}
 .modal-dialog .modal-content .modal-body #baps-div {
     display: grid;
}
 .modal-dialog .modal-content .modal-body #baps-div canvas {
     grid-column: 1;
     grid-row: 1;
     width: 100%;
}
 .modal-dialog .modal-content .modal-body #baps-div canvas#baps-canvas {
     z-index: 0;
     background-color: #337ab7;
}
 .modal-dialog .modal-content .modal-body #baps-div canvas#shadow-canvas {
     z-index: 1;
     background-color: transparent;
}
 .modal-dialog .modal-content .modal-body #baps-div .btn {
     left: 30%;
     top: 40%;
     border-radius: 4px;
     font-size: large;
}
 .modal-dialog .modal-content .modal-body #baps-div #rotate-buttons {
     position: absolute;
     top: 0;
     right: 0;
     display: inline-block;
     margin-right: 3%;
     margin-top: 3%;
}
 .modal-dialog .modal-content .modal-body #baps-div #zoom-buttons {
     display: flex;
     flex-direction: column;
     position: absolute;
     top: 54%;
     right: 0;
     display: inline-block;
     margin-right: 4.5%;
     margin-bottom: 4%;
     z-index: 2;
}
 .modal-dialog .modal-content .modal-body #baps-div #zoom-buttons #zoom-in {
     margin-bottom: 4px;
}
 .modal-dialog .modal-content .modal-body .table-modal {
    /*width:100%;
     */
     display: block;
     empty-cells: show;
    /* Decoration */
     border-spacing: 0;
     border: 1px solid #ddd;
}
 .modal-dialog .modal-content .modal-body .table-modal thead {
     background-color: #f1f1f1;
     position: relative;
     display: block;
     width: 100%;
     overflow-y: scroll;
}
 .modal-dialog .modal-content .modal-body .table-modal tbody {
    /* Position */
     display: block;
     position: relative;
     width: 100%;
     overflow-y: scroll;
     max-height: 20vh;
}
 .modal-dialog .modal-content .modal-body .table-modal tbody.body-half-screen {
     max-height: 20vh;
}
 .modal-dialog .modal-content .modal-body .table-modal tbody .selected-row {
     background-color: #dbdbdb;
}
 .modal-dialog .modal-content .modal-body .table-modal tbody tr {
     width: 100%;
     display: flex;
     height: 40px;
}
 .modal-dialog .modal-content .modal-body .table-modal tbody td, .modal-dialog .modal-content .modal-body .table-modal tbody th {
     flex-grow: 2;
     padding: 0.5rem;
     text-align: left;
}
 

   <div class="modal" id="baps-modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="display: flex;justify-content: center;">
                    <div class="modal-content" style="display: inline-block;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel"><?= Yii::t("app", "BAPS Screen"); ?></h4>
                        </div>
                        <div class="modal-body" style="display: inline-block;">
                        <div id="baps-div">
                                <div id="status"></div>
                                <canvas id="baps-canvas" style=""> 
                                    If you see this, your browser does not support HTML5 Canvas. 
                                </canvas>
                                <canvas id="shadow-canvas" style=""> 
                                </canvas>
    <!--<div id="rotate-buttons">
                                <button id="rotate-left" class="btn" ng-click=""><i class="fa fa-undo"></i></button>
                                <button id="rotate-right" class="btn" ng-click="rotateMap()"><i class="fa fa-repeat"></i></button>
                            </div> -->
                            
                                <div id="zoom-buttons" class="btn-group-vertical">
                                    <button id="zoom-in" class="btn"><i class="fa fa-search-plus"></i></button>
                                    <button id="zoom-out" class="btn" ng-click=""><i class="fa fa-search-minus"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>