Question

我有一个简单的应用程序，我正在处理，允许你将照片加载到画布，然后我想实现类似谷歌检查工具，当你在画布的任何部分悬停它给你的画布缩放预览照片的小区域。例如100x100像素方块，可让您查看放大的照片部分。但不幸的是，我不知道如何从这开始。目前的代码：

// Source Logic
var source_cvs = document.querySelector('.source'),
    source_ctx = source_cvs.getContext('2d'),
    source_w = source_cvs.width = 600,
    source_h = source_cvs.height = 400,
    img = new Image;

img.src = 'https://www.thecarpeople.co.uk/umbraco-media/Entry_492/c10a8f69-95b7-41ab-b341-73f1dd0fe6b2.jpg';

img.onload = function() {
    source_ctx.drawImage(img, 0, 0);
};

source_cvs.onmousemove = function(e) {
    console.log(e);
    var x = e.clientX,
        y = e.clientY;

    preview_render(x, y);
};

// Preview Logic
var preview_cvs = document.querySelector('.preview'),
    preview_ctx = preview_cvs.getContext('2d'),
    preview_w = preview_cvs.width = 100,
    preview_h = preview_cvs.height = 100,
    preview_render = function(x, y) {
        preview_ctx.clearRect(0, 0, preview_w, preview_h);
        preview_ctx.drawImage(img, x, y, 10, 10, 0, 0, 100, 100);
    };

演示：LINK

编辑：--------

我已经更新了我的代码，所以它实际上做了我需要的，它正在显示额外的正方形，我只是有问题如何正确缩放图像并使其正确居中，以便显示：

-50px
-50px
-50px
-50px

只是居中图像，所以光标指向中间。

Answer 1

我会用offsetX和offsetY替换clientX和clientY：

...
  var x = e.offsetX-7,
    y = e.offsetY-5;
...

DEMO

画布显示悬停区域的一部分放大为方形预览框

1 个答案: