Skip to content

Commit

Permalink
feat: add gesture doc
Browse files Browse the repository at this point in the history
  • Loading branch information
杍鱼 committed Apr 24, 2018
1 parent 4de892c commit 65cc14d
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 4 deletions.
63 changes: 63 additions & 0 deletions docs/api/gesture.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# gesture
用于图表绑定图表上的手势事件。该方法会返回 gestureController 。除了支持系统基础事件 touchstart 、 touchmove 、touchend。还支持复杂的手势,基于手势库 [hammerjs](https://github.com/hammerjs/hammer.js)

![image.png | left | 827x324](https://cdn.yuque.com/yuque/0/2018/png/104396/1524466228977-0589fe3d-2cef-4d42-946f-ae54f2dfb18b.png "")

## 如何引入使用插件

Gesture作为 F2 的插件,完整版不包含该手势插件,如果需要使用的话,需要先将该组件注册入 Chart 类或者 Chart 实例。
`hammerjs`  压缩文件大小 20k。 GZIP后大小 7.3k

```javascript
const F2 = require('@antv/f2/lib/core');
const Gesture = require('@antv/f2/lib/plugin/gesture');
// 1.全局注册,也可以给 chart 的实例注册
F2.Chart.plugins.register(Guide);
// 2.给具体的 chart 实例注册
const chart = new F2.Chart({
id: 'canvas',
plugins: Guide
});
```

## api

```javascript
// 加载初始化手势插件
chart.gesture({
 gesture: {},
 hammerOptions: {},
options: {},
});
```

#### 参数
* `gesture` : Object
     需要绑定的手势事件,以事件名为 key的回调方法。
     回调事件的第一个参数,data是手势事件触发中心点坐标对应的图形数据点。
回调事件的第二个参数,event是手势事件对象。三个基础手势事件放回的是[[touchEvent](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent)]。hammer手势返回的事件是[[eventObject](http://hammerjs.github.io/api/#event-object)]

```javascript
gesture: {
touchstart(data, event) {
console.log('touchstart')
},
press(data, event) {
console.log('press')
 }
}
```

* `hammerOptions` : Object
     传递给hammer的[参数配置](http://hammerjs.github.io/api/#hammer.defaults)。一般不需要配置。

* `options` : Object
手势插件的配置,配置如下

```javascript
options: {
 useCalculate: true, // 计算手势数据点,如果不需要可以关闭提高性能
useOffset: false // 计算数据是否需要计算图表相对页面偏移的坐标。当图表宽度超出, scroll模式,计算位置需要加上滚动记录
}
```

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"eslint-plugin-html": "~3.1.1",
"event-simulate": "^1.0.0",
"get-port": "~3.1.0",
"hammer-touchemulator": "^0.0.2",
"jquery": "^3.3.1",
"nightmare": "~2.10.0",
"nunjucks": "~3.0.1",
Expand Down
2 changes: 0 additions & 2 deletions test/unit/plugin/gesture-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ const F2 = require('../../../src/core');
const Gesture = require('../../../src/plugin/gesture');
const canvas = document.createElement('canvas');
const EventSimulate = require('event-simulate');
const TouchEmulator = require('hammer-touchemulator');
TouchEmulator();

canvas.width = 500;
canvas.height = 500;
Expand Down
2 changes: 1 addition & 1 deletion test/unit/plugin/tooltip-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('Tooltip Plugin', function() {
chart.destroy();
});

it.skip('custom tooltip', function(done) {
it('custom tooltip', function(done) {
data = [
{ label: 'Mon.', type: 'series1', value: 2800 },
{ label: 'Mon.', type: 'series2', value: 2260 },
Expand Down

0 comments on commit 65cc14d

Please sign in to comment.