标签:F2 2021SC 插件 Chart 源码 事件 手势 Gesture
2021SC@SDUSC
Gesture
用于图表绑定图表上的手势事件。该方法会返回 gestureController。除了支持系统基础事件 touchstart、touchmove、touchend,还支持复杂的手势,基于手势库 hammerjs。
如何引入使用插件
Gesture 作为 F2 的插件,完整版不包含该手势插件,如果需要使用的话,需要先将该组件注册入 Chart 类或者 Chart 实例。
hammerjs
压缩文件大小 20k。 GZIP 后大小 7.3k。
const F2 = require('@antv/f2/lib/core');
const Gesture = require('@antv/f2/lib/plugin/gesture');
// 1.全局注册,也可以给 chart 的实例注册
F2.Chart.plugins.register(Gesture);
// 2.给具体的 chart 实例注册
const chart = new F2.Chart({
id: 'canvas',
plugins: Gesture
});
API
// 加载初始化手势插件
chart.pluginGesture({
gesture: {},
hammerOptions: {},
options: {},
});
参数
gesture
: Object
需要绑定的手势事件,配置的属性为以事件名为 key 的回调方法。
gesture: {
touchstart(data, event) {
console.log('touchstart')
},
press(data, event) {
console.log('press')
}
}
- 回调事件的第一个参数,data 是手势事件触发中心点坐标对应的图形数据点。
- 回调事件的第二个参数,event 是手势事件对象。三个基础手势事件返回的是 touchEvent。hammer 手势返回的事件是 eventObject。
hammerOptions
: Object
传递给 hammer 的参数配置。一般不需要配置。
options
: Object
手势插件的配置,配置如下
options: {
useCalculate: true,
useOffset: false
标签:F2,2021SC,插件,Chart,源码,事件,手势,Gesture 来源: https://blog.csdn.net/weixin_45875690/article/details/120816451
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。