【问题标题】:Magnifying glass that follows cursor for canvas跟随画布光标的放大镜
【发布时间】:2014-07-21 05:22:45
【问题描述】:

我正在为我的一位客户设计 T 恤设计师,我使用 html5 画布制作它。衬衫设计师现在已经完成了,但他要求我添加一个放大镜(像这样:http://mlens.musings.it/)。我发现了很多类似的脚本,但是,它们似乎都有一个共同点,它们使用一个小图像和一个大图像。但是,使用画布时,我遇到了不同的情况,并且一直困惑于如何添加放大镜来放大光标在画布上的任何位置。

是否存在可以完成此任务的任何脚本?或者我还有什么其他选择?

【问题讨论】:

标签: javascript html canvas zooming magnify


【解决方案1】:

让我们将画布绘制到另一个画布上,但已缩放。

fiddle example

context.drawImage 允许我们指定我们想要获取多少原始画布以及在目标画布上绘制多大。因此,要进行 2 倍缩放,我们只需将两倍大小的原始画布绘制到目标画布即可。

var main = document.getElementById("main");
var zoom = document.getElementById("zoom");
var ctx = main.getContext("2d")
var zoomCtx = zoom.getContext("2d");
var img = new Image();
img.src = "http://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg"
img.onload = run;

function run(){
    ctx.drawImage(img,0,0);
}

main.addEventListener("mousemove", function(e){
    //console.log(e);
    zoomCtx.drawImage(main, e.x, e.y, 200, 100, 0,0, 400, 200);
    zoom.style.top = e.pageY + 10+ "px"
    zoom.style.left = e.pageX +10+ "px"
    zoom.style.display = "block";
});

main.addEventListener("mouseout", function(){
    zoom.style.display = "none";
});

【讨论】:

  • 致任何想尝试此操作的人:console.log() 调用似乎会破坏 Chrome 中的性能(以至于无法使用)。如果您有性能问题,请确保将它们注释掉。我很确定在发布此答案时这不是问题。