Question

我正在编写一个应用程序，我需要使用顶点着色器中的顶点坐标进行缩放，并且我也能够实现相同但缩放看起来不正确，因为如果我们将鼠标指向某个x，y位置它应该把它作为中心，它只是在我第一次变焦时发生，如果我尝试通过将鼠标移动到另一个x，y坐标后进行缩放，我得到的结果不正确。我做错了吗？

检查步骤：

打开Fiddle并浏览您电脑上的任何图片。
在某些X，Y坐标上使用鼠标滚轮进行缩放，然后移动鼠标并尝试在另一个x，y坐标上进行缩放。

错误：如果我们再次移动鼠标并进行缩放，则无法正确缩放。

这是fiddle和代码：

`

    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;

    };

`

如何使用顶点坐标在Webgl / opengl着色器中缩放纹理？[已编辑]

0 个答案: