首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >WebGL画布上的交互- PIXI + D3

WebGL画布上的交互- PIXI + D3
EN

Stack Overflow用户
提问于 2018-07-11 07:48:25
回答 1查看 1.3K关注 0票数 2

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

其目标是具有以下互动性特征:

  • 单击并拖动sprite以设置它的新位置
  • 摇粉
  • 缩放到屏幕(缩放)

我被困在平移和缩放,我已经尝试了下面的解决方案和事件是正确识别,但我无法移动的图表。

代码语言:javascript
代码运行次数:0
运行
复制
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缩放和pan?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-29 18:14:54

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

有一种干净的方法可以实现与pixi-视口的缩放和摇摄交互。它与pixi应用程序很好地融合在一起--作为可以添加图形/精灵的舞台。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51279965

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档