Question

我有一个非常简单的应用程序，可以在画布上完美地绘制图像。我正在按image.width / 2，image.height / 2转换上下文，并将目标点设置为-image.width / 2，-image.height / 2。

        function draw() {
        window.canvas = document.getElementById('canvas');
        window.ctx = canvas.getContext('2d');
        window.image = document.createElement("img");
        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.translate(image.width/2,image.height/2);
            ctx.drawImage(image,-image.width/2,-image.height/2);
        };
        image.src = 'rec.JPG';
    }

这将按原样显示图像。因此，考虑到这个概念，如果我想使图像的中心点位于画布的中心，则应该像上面一样进行此操作。现在，我希望用户单击画布，得到鼠标坐标。然后，我想缩放此图像并重新绘制画布，以便用户可以在中心（缩放版本）看到图像的该部分。代码如下：

        function zoom(evt) {
        var x = getMousePos(canvas, evt).x;
        var y = getMousePos(canvas, evt).y;
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.translate(x,y);
        ctx.scale(1.5, 1.5);
        ctx.drawImage(image,-x,-y);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

但是我不能以某种方式得到正确的结果。我想查看用户单击的区域，然后再次想单击以缩小，仅此而已。我可以轻松地做后面的部分，但是在缩放完美区域时遇到问题。我在stackoverflow上看到了类似的问题，但它们不符合我的要求。这是我的HTML和CSS：

    <style>
    .container {
        height: 500px;
    }
    .container .image-container {
        height: 500px;
        width: 50%;
        overflow: auto;
        position: absolute;
        border: 1px solid;
    }

    img {
        display: none;
    }

    canvas {
        width: 100%;
    }
</style>
<body onload="draw()">
    <div class="container">
        <div class="image-container">
    <canvas
            id="canvas"
            onclick="zoom(event)"
    >
    </canvas>
   </div>
   </div>
</body>

P.S：我不想平移。只需放大和缩小点击。您可以玩摘录。

        function draw() {
            window.canvas = document.getElementById('canvas');
            window.ctx = canvas.getContext('2d');
            window.image = document.createElement("img");
            window.isZoom = false;
            image.onload = function() {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(image.width/2,image.height/2);
                ctx.drawImage(image,-image.width/2,-image.height/2);
            };
            image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
        }

        function zoom(evt) {
            if(!isZoom) {
                var x = getMousePos(canvas, evt).x;
                var y = getMousePos(canvas, evt).y;
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(x,y);
                ctx.scale(2, 2);
                ctx.drawImage(image,-x,-y);
                canvas.style.cursor = 'zoom-out';
                isZoom = true;
            } else {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(image.width/2,image.height/2);
                ctx.drawImage(image,-image.width/2,-image.height/2);
                isZoom=false;
                canvas.style.cursor = 'zoom-in';
            }
        }

        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }

    <style>
        .container {
            height: 500px;
        }
        .container .image-container {
            height: 500px;
            width: 50%;
            overflow: auto;
            position: absolute;
            border: 1px solid;
        }

        img {
            display: none;
        }

        canvas {
            width: 100%;
            cursor: zoom-in;
        }
    </style>

<body onload="draw()">
<div class="container">
    <div class="image-container">
        <canvas
                id="canvas"
                onclick="zoom(event)"
        >
        </canvas>
    </div>
</div>
</body>

Answer 1

您真正靠近的地方，只需将比例混合到图像的绘图中

function draw() {
  window.canvas = document.getElementById('canvas');
  window.ctx = canvas.getContext('2d');
  window.image = document.createElement("img");
  window.isZoom = false;
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0,0);
  };
  image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
}

function zoom(evt) {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var scale = 2
  if (!isZoom) {
    var pos = getMousePos(canvas, evt);    
    ctx.scale(scale, scale);
    ctx.drawImage(image, -pos.x*scale*scale, -pos.y*scale*scale);
    canvas.style.cursor = 'zoom-out';
  } else {
    ctx.drawImage(image, 0, 0);
    canvas.style.cursor = 'zoom-in';
  }
  isZoom = !isZoom
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

.container {
  height: 500px;
}

.container .image-container {
  height: 500px;
  width: 50%;
  overflow: auto;
  position: absolute;
  border: 1px solid;
}

img {
  display: none;
}

canvas {
  width: 100%;
  cursor: zoom-in;
}

<body onload="draw()">
  <div class="container">
    <div class="image-container">
      <canvas id="canvas" onclick="zoom(event)">
        </canvas>
    </div>
  </div>
</body>

除了添加var scale之外，我还对您的代码进行了一些清理：

var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;

那是对getMousePos的双重浪费

相对于鼠标坐标缩放画布

1 个答案: