WebGL 上的交互性 Canvas - PIXI + D3

Question

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

查看

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

点击并拖动精灵来设置它的新位置
平移
将 vis 缩放到屏幕（缩放）

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

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 canvas 上正确实施 d3 缩放和平移？

Answer 1

回答我的问题以结束此主题 - 根据我的评论：

有一种简洁的方法可以实现与 pixi-viewport 的缩放和平移交互。它与 pixi 应用程序很好地融合在一起——充当可以添加 graphics/sprites 的阶段。

WebGL 上的交互性 Canvas - PIXI + D3

Interactivity on WebGL Canvas - PIXI + D3

interactive

canvas

webgl

d3.js

pixi.js