放大点（使用比例和平移）
我希望能够放大HTML 5canvas中的鼠标下的点，例如在Google地图上缩放。 我怎样才能做到这一点？
更好的解决scheme是根据缩放中的变化简单移动视口的位置。 缩放点只是旧缩放中的点和您希望保持不变的新缩放。 也就是说，视口预缩放和视口后缩放具有相对于视口相同的缩放点。 鉴于我们正在相对于原点进行缩放。 您可以相应地调整视口位置：
scalechange = newscale - oldscale; offsetX = -(zoomPointX * scalechange); offsetY = -(zoomPointY * scalechange); 所以，当你放大的时候，你可以平移到右边，相对于你放大的点，放大多less。
终于解决了它：
var zoomIntensity = 0.2; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = 600; var height = 200; var scale = 1; var originx = 0; var originy = 0; var visibleWidth = width; var visibleHeight = height; function draw(){ // Clear screen to white. context.fillStyle = "white"; context.fillRect(originx,originy,800/scale,600/scale); // Draw the black square. context.fillStyle = "black"; context.fillRect(50,50,100,100); } // Draw loop at 60FPS. setInterval(draw, 1000/60); canvas.onmousewheel = function (event){ event.preventDefault(); // Get mouse offset. var mousex = event.clientX - canvas.offsetLeft; var mousey = event.clientY - canvas.offsetTop; // Normalize wheel to +1 or -1. var wheel = event.wheelDelta/120; // Compute zoom factor. var zoom = Math.exp(wheel*zoomIntensity); // Translate so the visible origin is at the context's origin. context.translate(originx, originy); // Compute the new visible origin. Originally the mouse is at a // distance mouse/scale from the corner, we want the point under // the mouse to remain in the same place after the zoom, but this // is at mouse/new_scale away from the corner. Therefore we need to // shift the origin (coordinates of the corner) to account for this. originx -= mousex/(scale*zoom) - mousex/scale; originy -= mousey/(scale*zoom) - mousey/scale; // Scale it (centered around the origin due to the trasnslate above). context.scale(zoom, zoom); // Offset the visible origin to it's proper position. context.translate(-originx, -originy); // Update scale and others. scale *= zoom; visibleWidth = width / scale; visibleHeight = height / scale; }
<canvas id="canvas" width="600" height="200"></canvas>
这实际上是一个非常困难的问题（math），我几乎在做同样的事情。 我问了一个类似的问题在Stackoverflow，但没有得到任何回应，但张贴在DocType（StackOverflow的HTML / CSS），并得到了回应。 看看http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example
我正在构build一个jQuery插件（使用CSS3变换的Google Maps样式缩放）。 我已经缩放鼠标光标位工作正常，仍然试图找出如何让用户拖animation布，就像你可以在Google地图中做的一样。 当我得到它的工作，我会在这里张贴代码，但检查上面的链接鼠标，缩放到点部分。
我没有意识到在Canvas上下文中有缩放和翻译方法，你可以使用CSS3实现相同的function。 使用jQuery：
$('div.canvasContainer > canvas') .css('-moz-transform', 'scale(1) translate(0px, 0px)') .css('-webkit-transform', 'scale(1) translate(0px, 0px)') .css('-o-transform', 'scale(1) translate(0px, 0px)') .css('transform', 'scale(1) translate(0px, 0px)');
请确保您将CSS3 transform-origin设置为0，0（-moz-transform-origin：0 0）。 使用CSS3转换允许你放大任何东西，只要确保容器DIV被设置为溢出：隐藏，以停止放大侧边的缩放边缘。
无论你使用CSS3转换，还是canvas自己的缩放和翻译方法都取决于你，但请检查上面的链接进行计算。
更新：呃！ 我只是在这里发布代码，而不是让你跟随一个链接：
$(document).ready(function() { var scale = 1; // scale of the image var xLast = 0; // last x location on the screen var yLast = 0; // last y location on the screen var xImage = 0; // last x location on the image var yImage = 0; // last y location on the image // if mousewheel is moved $("#mosaicContainer").mousewheel(function(e, delta) { // find current location on screen var xScreen = e.pageX - $(this).offset().left; var yScreen = e.pageY - $(this).offset().top; // find current location on the image at the current scale xImage = xImage + ((xScreen - xLast) / scale); yImage = yImage + ((yScreen - yLast) / scale); // determine the new scale if (delta > 0) { scale *= 2; } else { scale /= 2; } scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale); // determine the location on the screen at the new scale var xNew = (xScreen - xImage) / scale; var yNew = (yScreen - yImage) / scale; // save the current screen location xLast = xScreen; yLast = yScreen; // redraw $(this).find('div').css('-moz-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')') .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px') return false; }); });
您当然需要调整它以使用canvas比例和翻译方法。
更新2：刚注意到我正在使用transform-origin和translate。 我已经设法实现一个版本，只是使用规模和自己翻译，检查出来在这里http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html等待图像下载，然后使用您的鼠标滚轮缩放，还支持通过拖动图像周围的平移。; 它使用CSS3转换，但是你应该能够使用相同的计算为您的canvas。
我遇到了这个问题使用c + +，我可能不应该有我刚刚使用OpenGLmatrix开始…反正，如果您使用的控制，其起源是左上angular，你想平移/缩放像谷歌地图，这里的布局（使用快板作为我的事件处理程序）：
// initialize double originx = 0; // or whatever its base offset is double originy = 0; // or whatever its base offset is double zoom = 1; . . . main(){ // ...set up your window with whatever // tool you want, load resources, etc . . . while (running){ /* Pan */ /* Left button scrolls. */ if (mouse == 1) { // get the translation (in window coordinates) double scroll_x = event.mouse.dx; // (x2-x1) double scroll_y = event.mouse.dy; // (y2-y1) // Translate the origin of the element (in window coordinates) originx += scroll_x; originy += scroll_y; } /* Zoom */ /* Mouse wheel zooms */ if (event.mouse.dz!=0){ // Get the position of the mouse with respect to // the origin of the map (or image or whatever). // Let us call these the map coordinates double mouse_x = event.mouse.x - originx; double mouse_y = event.mouse.y - originy; lastzoom = zoom; // your zoom function zoom += event.mouse.dz * 0.3 * zoom; // Get the position of the mouse // in map coordinates after scaling double newx = mouse_x * (zoom/lastzoom); double newy = mouse_y * (zoom/lastzoom); // reverse the translation caused by scaling originx += mouse_x - newx; originy += mouse_y - newy; } } } . . . draw(originx,originy,zoom){ // NOTE:The following is pseudocode // the point is that this method applies so long as // your object scales around its top-left corner // when you multiply it by zoom without applying a translation. // draw your object by first scaling... object.width = object.width * zoom; object.height = object.height * zoom; // then translating... object.X = originx; object.Y = originy; }
我喜欢Tatarize的回答，但我会提供一个替代scheme。 这是一个微不足道的线性代数问题，我提出的方法在平移，缩放，倾斜等方面效果很好。也就是说，如果图像已经被转换，效果很好。
当matrix被缩放时，比例是在点（0,0）。 所以，如果你有一个图像，并以2倍的比例缩放，那么右下angular的点将会在x和y方向上加倍（使用[0，0]是图像左上angular的惯例）。
如果你想缩放中心的图像，那么一个解决scheme如下：（1）平移图像，使其中心在（0,0）; （2）通过x和y因子来缩放图像; （3）将图像翻译回来。 即
myMatrix .translate(image.width / 2, image.height / 2) // 3 .scale(xFactor, yFactor) // 2 .translate(-image.width / 2, -image.height / 2); // 1
更抽象地说，同样的策略适用于任何一点。 例如，如果要在点P处缩放图像：
myMatrix .translate(Px, Py) .scale(xFactor, yFactor) .translate(-Px, -Py);
最后，如果图像已经以某种方式被转换（例如，如果它被旋转，倾斜，翻译或缩放），则当前转换需要被保留。 具体来说，上面定义的变换需要被当前变换后乘（或右乘）。
myMatrix .translate(Px, Py) .scale(xFactor, yFactor) .translate(-Px, -Py) .multiply(myMatrix);
你有它。 这是一个显示这个在行动中的庞然大物。 滚动鼠标滚轮上的点，你会看到，他们一直保持。 （仅在Chrome中进行testing） http://plnkr.co/edit/3aqsWHPLlSXJ9JCcJzgH?p=preview
我想把这些信息提供给那些分别绘制图片并对其进行移动缩放的人。
当你想存储放大和视口的位置时，这可能是有用的。
这是抽屉：
function redraw_ctx(){ self.ctx.clearRect(0,0,canvas_width, canvas_height) self.ctx.save() self.ctx.scale(self.data.zoom, self.data.zoom) // self.ctx.translate(self.data.position.left, self.data.position.top) // position second // Here We draw useful scene My task - image: self.ctx.drawImage(self.img ,0,0) // position 0,0 - we already prepared self.ctx.restore(); // Restore!!! }
通知尺度必须是第一个 。
这里是缩影：
function zoom(zf, px, py){ // zf - is a zoom factor, which in my case was one of (0.1, -0.1) // px, py coordinates - is point within canvas // eg. px = evt.clientX - canvas.offset().left // py = evt.clientY - canvas.offset().top var z = self.data.zoom; var x = self.data.position.left; var y = self.data.position.top; var nz = z + zf; // getting new zoom var K = (z*z + z*zf) // putting some magic var nx = x - ( (px*zf) / K ); var ny = y - ( (py*zf) / K); self.data.position.left = nx; // renew positions self.data.position.top = ny; self.data.zoom = nz; // ... and zoom self.redraw_ctx(); // redraw context }
当然，我们需要一个拖拉机：
this.my_cont.mousemove(function(evt){ if (is_drag){ var cur_pos = {x: evt.clientX - off.left, y: evt.clientY - off.top} var diff = {x: cur_pos.x - old_pos.x, y: cur_pos.y - old_pos.y} self.data.position.left += (diff.x / self.data.zoom); // we want to move the point of cursor strictly self.data.position.top += (diff.y / self.data.zoom); old_pos = cur_pos; self.redraw_ctx(); } })
这是另一种使用setTransform（）而不是scale（）和translate（）的方法。 一切都存储在同一个对象。 假设页面上的canvas为0,0，否则需要从页面坐标中减去其位置。
this.zoomIn = function (pageX, pageY) { var zoomFactor = 1.1; this.scale = this.scale * zoomFactor; this.lastTranslation = { x: pageX - (pageX - this.lastTranslation.x) * zoomFactor, y: pageY - (pageY - this.lastTranslation.y) * zoomFactor }; this.canvasContext.setTransform(this.scale, 0, 0, this.scale, this.lastTranslation.x, this.lastTranslation.y); }; this.zoomOut = function (pageX, pageY) { var zoomFactor = 1.1; this.scale = this.scale / zoomFactor; this.lastTranslation = { x: pageX - (pageX - this.lastTranslation.x) / zoomFactor, y: pageY - (pageY - this.lastTranslation.y) / zoomFactor }; this.canvasContext.setTransform(this.scale, 0, 0, this.scale, this.lastTranslation.x, this.lastTranslation.y); };
伴随代码来处理平移：
this.startPan = function (pageX, pageY) { this.startTranslation = { x: pageX - this.lastTranslation.x, y: pageY - this.lastTranslation.y }; }; this.continuePan = function (pageX, pageY) { var newTranslation = {x: pageX - this.startTranslation.x, y: pageY - this.startTranslation.y}; this.canvasContext.setTransform(this.scale, 0, 0, this.scale, newTranslation.x, newTranslation.y); }; this.endPan = function (pageX, pageY) { this.lastTranslation = { x: pageX - this.startTranslation.x, y: pageY - this.startTranslation.y }; };
要自己推导出答案，请考虑在缩放之前和之后，相同的页面坐标需要匹配相同的canvas坐标。 那么你可以从这个等式开始做一些代数：
（pageCoords – 翻译）/ scale = canvasCoords
这是我的解决scheme为中心为导向的图像：
var MIN_SCALE = 1; var MAX_SCALE = 5; var scale = MIN_SCALE; var offsetX = 0; var offsetY = 0; var $image = $('#myImage'); var $container = $('#container'); var areaWidth = $container.width(); var areaHeight = $container.height(); $container.on('wheel', function(event) { event.preventDefault(); var clientX = event.originalEvent.pageX - $container.offset().left; var clientY = event.originalEvent.pageY - $container.offset().top; var nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale - event.originalEvent.deltaY / 100)); var percentXInCurrentBox = clientX / areaWidth; var percentYInCurrentBox = clientY / areaHeight; var currentBoxWidth = areaWidth / scale; var currentBoxHeight = areaHeight / scale; var nextBoxWidth = areaWidth / nextScale; var nextBoxHeight = areaHeight / nextScale; var deltaX = (nextBoxWidth - currentBoxWidth) * (percentXInCurrentBox - 0.5); var deltaY = (nextBoxHeight - currentBoxHeight) * (percentYInCurrentBox - 0.5); var nextOffsetX = offsetX - deltaX; var nextOffsetY = offsetY - deltaY; $image.css({ transform : 'scale(' + nextScale + ')', left : -1 * nextOffsetX * nextScale, right : nextOffsetX * nextScale, top : -1 * nextOffsetY * nextScale, bottom : nextOffsetY * nextScale }); offsetX = nextOffsetX; offsetY = nextOffsetY; scale = nextScale; });
body { background-color: orange; } #container { margin: 30px; width: 500px; height: 500px; background-color: white; position: relative; overflow: hidden; } img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-width: 100%; max-height: 100%; margin: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <img id="myImage" src="http://s18.postimg.org/eplac6dbd/mountain.jpg"> </div>
if(wheel > 0) { this.scale *= 1.1; this.offsetX -= (mouseX - this.offsetX) * (1.1 - 1); this.offsetY -= (mouseY - this.offsetY) * (1.1 - 1); } else { this.scale *= 1/1.1; this.offsetX -= (mouseX - this.offsetX) * (1/1.1 - 1); this.offsetY -= (mouseY - this.offsetY) * (1/1.1 - 1); }
这是@ tatarize的答案的代码实现，使用PIXI.js. 我有一个视图看一部分非常大的图像（例如谷歌地图样式）。
$canvasContainer.on('wheel', function (ev) { var scaleDelta = 0.02; var currentScale = imageContainer.scale.x; var nextScale = currentScale + scaleDelta; var offsetX = -(mousePosOnImage.x * scaleDelta); var offsetY = -(mousePosOnImage.y * scaleDelta); imageContainer.position.x += offsetX; imageContainer.position.y += offsetY; imageContainer.scale.set(nextScale); renderer.render(stage); });
-
$canvasContainer是我的HTML容器。 -
imageContainer是我的imageContainer容器，里面有图像。 -
mousePosOnImage是相对于整个图像的鼠标位置（不只是视图端口）。
以下是我如何获得鼠标位置：
imageContainer.on('mousemove', _.bind(function(ev) { mousePosOnImage = ev.data.getLocalPosition(imageContainer); mousePosOnViewport.x = ev.data.originalEvent.offsetX; mousePosOnViewport.y = ev.data.originalEvent.offsetY; },self));
您需要在缩放之前和之后在世界空间（与屏幕空间相对）中获取点，然后按增量转换。
mouse_world_position = to_world_position(mouse_screen_position); zoom(); mouse_world_position_new = to_world_position(mouse_screen_position); translation += mouse_world_position_new - mouse_world_position;
鼠标位置在屏幕空间，所以你必须把它转换到世界空间。 简单的转换应该类似于这个：
world_position = screen_position / scale - translation
您可以使用scrollto（x，y）函数来处理滚动条的位置，直到放大后需要显示的位置。用于查找鼠标使用位置event.clientX和event.clientY。 这将帮助你
