相关疑难解决方法(0)

我正在编写一个HTML5 <canvas>项目,该项目涉及使用滚轮放大和缩小图像.我想像谷歌地图一样向光标缩放,但我完全迷失了如何计算动作.

我有什么:图像x和y(左上角); 图像宽度和高度; 光标x和y相对于画布的中心.

我有一张地图.我希望用户能够缩放和平移地图.想象一下谷歌地图,但不是无限地平移,地图是一个正方形(如果你超越它的边缘,它不会再次环绕).

我使用scale()和实现了缩放和平移translate().这些都很好用.

我被困在最后一部分 - 当用户放大时,我想围绕该点居中放大.很难用文字解释,所以想象一下当你在谷歌地图中鼠标轮时会发生什么 - 这就是我想要的.

我已经在标题中查看了关于SO的每个答案.大多数是这个的变体,基本上说这是我需要做的:

ctx.translate(/* to the point where the mouse is */);
ctx.scale(/* to zoom level I want */)
ctx.translate(/* back to the point where the mouse was, taking zoom into account */);

然而,无论我做什么,我似乎无法让它工作.我可以让它在缩放后缩放到特定点,但无论我做什么,我都无法使该点等于鼠标指针所在的位置.

看看这个小提琴.想象一下,广场是一张地图,圆圈是国家或其他什么.

我找到的最佳实现是这个SO答案和链接的例子.但是,代码使用了SVG和.createSVGMatrix()各种各样的东西,坦率地说,我无法理解.如果可能的话,我更喜欢全画布解决方案.

显然我对使用库这样做不感兴趣.我想明白为什么我所做的不起作用.

我试图限制界限，但遇到了问题。我正在放大另一个画布上的图像，然后实现缩放。我的问题（下面的代码）是限制/限制offsetx / y，以便您永远看不到空格；仅图像的一部分。

请原谅！任何帮助表示赞赏！：P

var zoomIntensity = 0.2;

var canvas = document.getElementById("canvas");
var canvas2 = document.getElementById("canvas2");
var context = canvas.getContext("2d");
var context2 = canvas2.getContext("2d");
var width = 200;
var height = 200;

var scale = 1;
var originx = 0;
var originy = 0;

var offset = {x:0, y:0};

//fill smaller canvas with random pixels
for(var x = 0; x < 100; x++)
for(var y = 0; y < 100; y++)
{
  var rando = function(){return Math.floor(Math.random() * 9)};
  var …