gpt4 book ai didi

javascript - 跟随 Canvas 光标的放大镜

转载 作者:太空宇宙 更新时间:2023-11-04 13:36:12 25 4
gpt4 key购买 nike

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

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

最佳答案

让我们将 Canvas 绘制到另一个 Canvas ,但进行了缩放。

fiddle example

context.drawImage 允许我们指定我们想要获得多少原始 Canvas 以及在目标 Canvas 上绘制多大的 Canvas 。因此,要进行 2 倍缩放,我们只需将原始 Canvas 绘制到目标 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);
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";
});

关于javascript - 跟随 Canvas 光标的放大镜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23971717/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com