我正在尝试在移动设备上实现双指缩放,但是用一个手指(而不是2个手指)拖动应该会产生不同的行为。
我尝试结合使用d3-zoom和d3-drag。尽管我的解决方案可在桌面上正常运行且事件已正确触发,但在移动设备上却无法正常工作。
这是一个重现我的问题的简单示例:在移动缩放和拖动上,红色矩形无效。
OrderedDict([('0.jpg', None),
('1.jpg', None),
('2.jpg', None),
('3.jpg', None),
('4.jpg', None),
('5.jpg', None),
('6.jpg', None),
('7.jpg', None),
('8.jpg', None),
('9.jpg', None),
('10.jpg', None),
('11.jpg', None),
('12.jpg', None),
('13.jpg', None),
('14.jpg', None),
('15.jpg', None),
('16.jpg', None),
('17.jpg', None),
('18.jpg', None),
('19.jpg', None),
('20.jpg', None)])
d3.select("#a")
.call(d3.drag().on("drag", drag))
.call(d3.zoom().on("zoom", zoom))
d3.select("#b")
.call(d3.zoom().on("zoom", zoom))
function zoom() {
d3.select(this).select("p").text(`zooming`);
}
function drag() {
d3.select(this).select("p").text(`dragging`);
}
body {
}
#a {
width:100vh;
height:50vh;
background:red;
}
#b {
width:100vh;
height:50vh;
background:blue;
}