4

我正在尝试使用 WebGL（regl，更具体地说）创建 2D 图形可视化。通过我当前的实现，我已经可以看到应用于每个节点的力布局，这很好。当我尝试相对于当前鼠标位置进行缩放时，问题就出现了。根据我的研究，要实现这种行为，有必要按以下顺序应用矩阵变换：

translate(nodePosition, mousePosition)
scale(scaleFactor)
translate(nodePosition, -mousePosition)

因此，每次wheel触发事件时，都会重新计算鼠标位置，并使用新的鼠标位置信息更新变换矩阵。当前的行为很奇怪，我似乎无法理解出了什么问题。这是一个活生生的例子。

在此处输入图像描述

显然，如果我将鼠标固定在初始位置进行放大和缩小，一切正常。但是，如果我移动鼠标并尝试将注意力集中在另一个节点上，那么它就会失败。

获取鼠标位置的函数是： 

const getMousePosition = (event) => {
    var canvas = event.currentTarget
    var rect = canvas.getBoundingClientRect()
    var x = event.clientX - rect.left
    var y = event.clientY - rect.top
    var projection = mat3.create()
    var pos = vec2.fromValues(x,y)
    // this converts the mouse coordinates from 
    // pixel space to WebGL clipspace
    mat3.projection(projection, canvas.clientWidth, canvas.clientHeight)
    vec2.transformMat3(pos, pos, projection)
    return(pos)
}

事件wheel监听回调： 

var zoomFactor = 1.0
var mouse = vec2.fromValues(0.0, 0.0)
options.canvas.addEventListener("wheel", (event) => {
    event.preventDefault()
    mouse = getMousePosition(event)
    var direction = event.deltaY < 0 ? 1 : -1
    zoomFactor = 1 + direction * 0.1
    updateTransform()
})

以及更新变换的函数： 

var transform = mat3.create()
function updateTransform() {
    var negativeMouse = vec2.create()
    vec2.negate(negativeMouse, mouse)
    mat3.translate(transform, transform, mouse)
    mat3.scale(transform, transform, [zoomFactor, zoomFactor])
    mat3.translate(transform, transform, negativeMouse)
}

该transform矩阵在顶点着色器中作为统一体提供： 

  precision highp float;
  attribute vec2 position;

  uniform mat3 transform;

  uniform float stageWidth;
  uniform float stageHeight;

  vec2 normalizeCoords(vec2 position) {
    float x = (position[0]+ (stageWidth  / 2.0));
    float y = (position[1]+ (stageHeight / 2.0));

    return vec2(
        2.0 * ((x / stageWidth ) - 0.5),
      -(2.0 * ((y / stageHeight) - 0.5))
    );
  }

  void main () {
    gl_PointSize = 7.0;
    vec3 final = transform * vec3(normalizeCoords(position), 1);
    gl_Position = vec4(final.xy, 0, 1);
  }

其中，position是保存节点位置的属性。

到目前为止，我已经尝试过：

  • 我已经尝试改变转换的顺序。结果更奇怪。
  • 当我独立应用平移或缩放时，一切看起来都很好。

这是我第一次与不是通常的 SVG/canvas 的东西进行交互。解决方案可能很明显，但我真的不知道该去哪里找了。我究竟做错了什么？

2018 年 6 月 11 日更新

我遵循@Johan 的建议并在现场演示中实现了它。虽然解释相当有说服力，但结果却不是我所期待的。反转变换以获得模型空间中的鼠标位置的想法对我来说很有意义，但我的直觉（这可能是错误的）说直接在屏幕空间上应用变换也应该有效。为什么我不能在屏幕空间中同时投影节点和鼠标并直接在那里应用变换？

2018 年 7 月 11 日更新

经过一番挣扎后，我决定采用不同的方法，并根据我的用例调整这个答案的解决方案。尽管缩放的工作正常（还添加了平移），但我仍然相信有些解决方案根本不依赖 d3-zoom。正如评论中所建议的那样，也许可以隔离视图矩阵并独立控制它以实现预期的行为。要查看我当前的解决方案，请在下面查看我的答案。

4

2 回答 2

2

好吧，在使用原始方法失败后，我设法使这个解决方案适用于我的用例。

现在的updateTransform功能是： 

var transform = mat3.create();
function updateTransform(x, y, scale) {
    mat3.projection(transform, options.canvas.width, options.canvas.height);
    mat3.translate(transform, transform, [x,y]);
    mat3.scale(transform, transform, [scale,scale]);
    mat3.translate(transform, transform, [
      options.canvas.width / 2,
      options.canvas.height / 2
    ]);
    mat3.scale(transform, transform, [
      options.canvas.width / 2,
      options.canvas.height / 2
    ]);
    mat3.scale(transform, transform, [1, -1]);
}

并由 d3-zoom 调用：

import { zoom as d3Zoom } from "d3-zoom";
import { select } from "d3-selection";

var zoom = d3Zoom();

d3Event = () => require("d3-selection").event;

select(options.canvas)
      .call(zoom.on("zoom", () => {
          var t = d3Event().transform
          updateTransform(t.x, t.y, t.k)
       }));

这是此解决方案的现场演示。

在此处输入图像描述

于 2018-11-07T16:13:10.503 回答
1

您的转换将模型映射到目标视口。如果您想校正因缩放（例如增量）而导致的平移，这是目标坐标中的距离，您需要在模型坐标中转换此增量。也就是说，确定变换的倒数并计算模型坐标中的校正

下面给出了准备在视口坐标中围绕中心进行缩放的简单示例：

function map (a, p) {
    return [a[0] * p[0] + a[3] * p[1] + a[6],a[1] * p[0] + a[4] * p[1] + a[7]];
}

function scale(transform,scale,viewCenter1) {    
    var inverted = mat3.create();
    mat3.invert(inverted,transform);
    var modelCenter1 = map(inverted,viewCenter1);   // scale from this point in model

    mat3.scale(transform,transform,[scale,scale]);
    var viewCenter2 = map(transform,modelCenter1);  // map model center to screen 
    var viewShift = [viewCenter1[0]-viewCenter2[0],viewCenter1[1]-viewCenter2[1]];

    mat3.invert(inverted,transform);
    var modelShift = map(inverted,viewShift) - map(inverted,[0,0]);
    mat3.translate(transform,[-modelShift[0],-modelShift[1]]);   // correct for the shift
}

// pass the transformation to webgl environment
于 2018-11-06T09:11:43.130 回答