html - 动态调整画布大小后 Html5 画布绘图错位

问题描述

我想知道是否有人可以帮助我。我在画布中放置一个圆圈并动态调整画布的大小，但是这样做时我的圆圈放错了位置。我想知道是否有人可以帮助我解决这个问题。图1在字母“O”的中间显示了一个红色圆圈，图2显示了在调整画布大小后红色圆圈不在其预期位置（它仍应继续在字母“O”的中间）。

这是我的html和javascript：

        var points_x = new Array();
        var points_y = new Array();

        var img = document.getElementById("img");
        var original_width = img.naturalWidth;
        var original_height = img.naturalHeight;
        var current_width = original_width; 

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        canvas.width = original_width;
        canvas.height = original_height;

        function saveResizeAndRedisplay(scaleFactor) {
                    
            current_width += scaleFactor;
            img.width = current_width;
            
            // resize the canvas
            canvas.width += scaleFactor;
            canvas.height += scaleFactor;

            for (var i = 0; i < points_x.length; i++) {
                
                //this is where things are going wrong !!!
                points_x[i] += scaleFactor;
                    points_y[i] += scaleFactor;
            }

            redraw_points_after_zoom();
        }

        canvas.addEventListener("mousedown", function(e) {
            getMousePosition(canvas, e);
        });

        function getMousePosition(canvas, event) {

            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

            points_x.push(x);
            points_y.push(y);

            var radius = 3;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        function redraw_points_after_zoom() {

            var radius = 3;

            for (var i = 0; i < points_x.length; i++) {

                ctx.beginPath();
                    ctx.arc(points_x[i], points_y[i], radius, 0, 2 * Math.PI, false);
                    ctx.fillStyle = 'red';
                    ctx.fill();
            }
        }

        $("#resizer").click(function() {
          saveResizeAndRedisplay(50);
        });

        body {
            background-color: ivory;
            padding:10px;
        }
        canvas {
            border:1px solid red;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="display: inline-block;">
  
  <button id="resizer">Click to resize the canvas</button>

  <br/>
  <img id="img" src="https://www.miamidade.gov/resources/images/services/adopt-a-tree-logo-01-08-2019.png" alt="" style="z-index: 1;position: absolute;">
  
  <canvas id="canvas" style="z-index: 20;position: relative;"></canvas>

</div>

任何帮助表示赞赏

PS：我不想保存想将画布的内容保存为img并重新加载它。

标签： htmlcanvasdrawing

html - 动态调整画布大小后 Html5 画布绘图错位

问题描述

解决方案

推荐阅读