0

I am writing an application where I need to zoom using the vertex coordinates in Vertex shader and am also able to achieve the same but the zoom doesn't look correct because if we point our mouse on a certain x,y position it should take that as center and it is only happening for me for the very first time when I zoom and if I try to zoom by moving the mouse to another x,y coordinate afterwards, I get incorrect result. Am I doing anything wrong?

Steps to check :

  1. Open Fiddle and browse for any image from your PC.

  2. Zoom using Mousewheel on some X,Y coordinate and and later move your mouse and try zooming on another x,y coordinate.

Error : It is not zooming properly if we move the mouse and zoom again.

Here's the fiddle and code:

` 

    var prevX, prevY, zoomCounter = 0;
    var zoom = function (e) {
      var x = e.offsetX, y = e.offsetY;
      var w = img.width, h = img.height;
      var leftPart = (x - AR.x)/AR.renderableWidth;
      var topPart = (y - AR.y)/AR.renderableHeight;
      var rightPart = 1.0 - leftPart;
      var bottomPart = 1.0 - topPart;
      if (e.wheelDelta > 0) {
        zoomCounter++;
      } else {
        zoomCounter--;
      }

      if (zoomCounter < 0) {
        zoomCounter = 0;
        return;
      }

      /*if (prevX && (prevX !== x || prevY !== y)) {
      console.warn('Coords changed');
      leftPart = (x - prevX - AR.x)/AR.renderableWidth;
      topPart = (y - prevY - AR.y)/AR.renderableHeight;
      rightPart = 1.0 - leftPart;
      bottomPart = 1.0 - topPart;
      }*/

      if (e.wheelDelta > 0) {
        x1 -= 0.10 * w * leftPart;
        x2 += 0.10 * w * rightPart;
        y1 -= 0.10 * h * topPart;
        y2 += 0.10 * h * bottomPart;
      } else {
        x1 += 0.10 * w * leftPart;
        x2 -= 0.10 * w * rightPart;
        y1 += 0.10 * h * topPart;
        y2 -= 0.10 * h * bottomPart;
      }

      updateCanvas();

      prevX = x; 
      prevY = y;

    };

`

graphics123
  • 1,191
  • 3
  • 20
  • 57
  • Are you trying to make a 3D zoom like sniper-zoom? Or a 2D zoom like scale a picture? – Thomas Mar 24 '18 at 12:51
  • https://stackoverflow.com/a/37222104/128511 – gman Mar 24 '18 at 17:12
  • @Thomas I am just looking for 2D scaling to replicate the windows picture viewer zoom functionally – graphics123 Mar 25 '18 at 00:44
  • @gman let me study about it as I am not really sure if I can change my whole project according to the link solution that you have provided..I actually need to keep track of the coordinates because I am using a 2D Api I.e. fabric.js to draw few shapes on top of the texture/canvas... so I am a bit doubtful.. – graphics123 Mar 25 '18 at 00:49
  • @gman I went through [this](https://stackoverflow.com/questions/42406600/using-d3-zoom-to-interact-with-webgl) solution from you where you did some matrix multiplication in the setTransform method, will it be helpful in my case? Because I too just need to zoom and Pan – graphics123 Mar 25 '18 at 14:58
  • given the function `canvas.drawImage(img, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight)` it should be pretty clear how to zoom and pan. The link I provided implements that function in WebGL. Otherwise you can scale and pan around a texture with `vec4 color = texture2d(someSampler, texcoords * scale + offset;` where `scale` and `offset` are `uniform vec2`s – gman Mar 25 '18 at 16:34
  • So now we have 2 ways(changing vertices and changing texture coordinates) to scale or pan ... I am actually concerned about the quality of the texture because currently I am simply zooming using fabric.js api and it reduces the quality of the texture after certain zoom.. which one you would suggest to be used in order to retain maximum quality of the texture pixels .. vertex coordinates or texture coordinates? – graphics123 Mar 25 '18 at 19:40
  • Actually Quality is retained if we modify vertex coordinates , Don't know about texture coords... Tried the same and now am able to zoom properly as well but it's not working for the second time. I updated the question above. – graphics123 Mar 26 '18 at 13:40

0 Answers0