条形图在加入Pan手势且canvas不在(0, 0)的情况,触摸点位置不正确
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
- [x] I have searched the [issues](https://github.com/antvis/f2/issues) of this repository and believe that this is not a duplicate.
### Reproduction link
[https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html)
### Steps to reproduce
##### 1.打开demo链接:https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html
##### 2.用下面代码替换模版全部代码:
```javascript
F2 图表组件库 - AntV
/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;
$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/f2/linear-pan.json', function(data) {
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
release: {
min: 1990,
max: 2010
}
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [3, 5]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = items[0].title;
}
});
chart.interval().position('release*count');
chart.interaction('pan');
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5
}
});
chart.coord({
transposed: true
});
// 绘制 tag
chart.guide().tag({
position: [1969, 1344],
withPoint: false,
content: '1,344',
limitInPlot: true,
offsetX: 5,
direct: 'cr'
});
chart.render();
});
```
### What is expected?
触摸点是正确的,选中手指位置的数据
### What is actually happening?
触摸点向下偏移,偏移量为canvas的y值
| Environment | Info |
|---|---|
| f2 | 3.4.2 |
| System | Mac 10.15 |
| Browser | Chrome 77.0.3865.90 |
Contributor guide
Research direction
Start with the linked pan-for-line-chart reproduction and inspect F2's pan interaction handling for touch coordinates when the canvas has a nonzero page offset. Reproduce the downward offset with the provided example, then verify that touching a bar selects the data at the finger position even when the canvas is below the page origin.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100