2

我有一个使用 pixi.js 和 d3 的数据可视化——一个概念证明。它应该在 WebGL 画布上运行以启用自定义着色器。当前状态可以在https://codepen.io/stopyransky/full/vrMxKQ/查看

目标是具有以下交互功能：

  • 单击并拖动精灵以设置它的新位置
  • 平移
  • 缩放到屏幕（缩放）

我被困在平移和缩放中，我尝试了以下解决方案并且事件被正确识别，但我无法移动图表。

d3.select(app.view)
  .call(d3.zoom()
    .scaleExtent([0.5, 8])
    .on("zoom", function zoomed() {
      transform = d3.event.transform;
      if(!globalDragging) updateSimulationOnZoom();
    })
  );

function updateSimulationOnZoom() {
  if(d3.event.sourceEvent.type === 'wheel') {
   console.log('zooming')
  }
  if(d3.event.sourceEvent.type === 'mousemove') {
    console.log("paning");

    data.sprites.forEach(sprite => {
    sprite.fx += transform.x
    sprite.fy += transform.y
  })
 }
}

在这种情况下，如何在 webgl 画布上正确实现 d3 缩放和平移？

4

1 回答 1

1

回答我的问题以结束这个话题 - 根据我的评论：

使用pixi-viewport实现缩放和平移交互性是一种简洁的方法。它与 pixi 应用程序完美融合 - 充当可以添加图形/精灵的舞台。

于 2018-08-29T18:14:54.667 回答