Question

我使用pixi.js和d3进行了数据可视化-概念证明。它应在WebGL canvas上运行以启用自定义着色器。可以在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 canvas上正确实现d3缩放和平移？

Answer 1

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

有一种干净的方法可以实现与pixi-viewport的缩放和平移交互。它与pixi应用程序完美融合-充当可以添加图形/精灵的阶段。

WebGL Canvas上的交互-PIXI + D3

1 个答案: