WebGL Canvas 上的交互性 - PIXI + D3答案

【问题标题】：Interactivity on WebGL Canvas - PIXI + D3WebGL Canvas 上的交互性 - PIXI + D3
【发布时间】：2018-07-11 07:48:25
【问题描述】：

我有一个使用 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 缩放和平移？

【问题讨论】：

我找到了解决方案，但它不包括 d3.zoom 工具。有pixi-viewport 包可用，它是一个 PIXI.Container 并处理诸如拖动和缩放滚动等交互。

标签： d3.js canvas webgl interactive pixi.js

【解决方案1】：

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

pixi-viewport 可以通过简洁的方式实现缩放和平移交互。它与 pixi 应用程序完美融合 - 作为可以添加图形/精灵的舞台。

【讨论】：