WebGL画布上的交互- PIXI + D3
WebGL画布上的交互- PIXI + D3
提问于 2018-07-11 07:48:25
我有一个数据可视化与pixi.js和d3 -一个概念的证明。它应该在WebGL画布上运行，以启用自定义着色器。当前状态可以在https://codepen.io/stopyransky/full/vrMxKQ/上查看
其目标是具有以下互动性特征：
- 单击并拖动sprite以设置它的新位置
- 摇粉
- 缩放到屏幕(缩放)
我被困在平移和缩放，我已经尝试了下面的解决方案和事件是正确识别，但我无法移动的图表。
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？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-29 18:14:54
回答我的问题以结束这个话题--根据我的评论：
有一种干净的方法可以实现与pixi-视口的缩放和摇摄交互。它与pixi应用程序很好地融合在一起--作为可以添加图形/精灵的舞台。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51279965
复制相关文章
相似问题
腾讯云开发者
