跟随光标在画布上的放大镜 [英] Magnifying glass that follows cursor for canvas

问题描述

我正在为我的客户设计T恤衫，我使用html5 canvas制作了它.衬衫设计师现已完成，但他要求我添加一个放大镜(如下所示: http://mlens.musings.it/).我在那里找到了许多类似的脚本，但是，它们似乎都有一个共同点，即它们使用的是大大小小的图像.但是，使用画布时，我遇到了另一种情况，并且对如何添加放大镜来放大光标在画布上的位置感到困惑.

I'm working on a t-shirt designer for a client of mine and I made it using html5 canvas. The shirt designer is now finished but he requested I add a magnifying glass (something like this: http://mlens.musings.it/). I've found a lot of similar scripts out there, however, they all seem to have one thing in common they use a small and a large image. Using canvas, however, I have a different scenario and have been stumped on how I can add a magnifying glass to magnify where ever the cursor is on canvas.

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

Are there any scripts that exist that can get this done? or what other options would I have?

推荐答案

让我们将画布绘制到另一个画布上，然后缩放.

Let's just draw the canvas to another canvas but scaled.

context.drawImage 允许我们指定要获取的原始画布数量以及在目标画布上绘制画布的尺寸.因此，要进行2倍缩放，我们只需将原始画布绘制为目标画布两倍大小即可.

context.drawImage allows us to specify how much of the origin canvas we want to get and how big to draw it on the destination canvas. So to do a times 2 zoom we just draw the origin canvas twice the size to the destination canvas.

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);
    console.log(zoom.style);
    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";
});

这篇关于跟随光标在画布上的放大镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！