test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: fix customBehavior demo

Browse Source
This commit is contained in:
chenluli 2020-07-14 20:25:37 +08:00 committed by Yanyan Wang
parent 13e7fb952c
commit c699bb75f1
3 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/interaction/customBehavior/demo/dragCanvasTwoFingers.js
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
/**
* This demo shows how to custom a behavior to allow drag canvas with two fingers on touchpad and wheel
* This demo shows how to custom a behavior to allow drag and zoom canvas with two fingers on touchpad and wheel
* By Shiwu
*/
G6.registerBehavior('double-finger-drag-canvas', {
@ -14,7 +14,6 @@ G6.registerBehavior('double-finger-drag-canvas', {
onWheel: function onWheel(ev) {
if (ev.ctrlKey) {
const canvas = graph.get('canvas');
const pixelRatio = canvas.get('pixelRatio');
const point = canvas.getPointByClient(ev.clientX, ev.clientY);
let ratio = graph.getZoom();
if (ev.wheelDelta > 0) {
@ -23,8 +22,8 @@ G6.registerBehavior('double-finger-drag-canvas', {
ratio = ratio - ratio * 0.05;
}
graph.zoomTo(ratio, {
x: point.x / pixelRatio,
y: point.y / pixelRatio
x: point.x,
y: point.y,
});
} else {
const x = ev.deltaX || ev.movementX;
@ -50,6 +49,8 @@ const graph = new G6.Graph({
},
});
graph.get('canvas').set('localRefresh', false);
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
.then(res => res.json())
.then(data => {

1
examples/interaction/customBehavior/index.en.md
View File

@ -8,3 +8,4 @@ Custom a behavior when the [built-in behaviors](/en/docs/manual/middle/states/de
## Usage
Custom a behavior with `graph.registerBehavior`, refer to [Custom Behavior Doc](/en/docs/manual/advanced/custom-behavior).
The following demo shows how to custom a behavior to allow drag and zoom canvas with two fingers on touchpad and wheel.

3
examples/interaction/customBehavior/index.zh.md
View File

@ -7,4 +7,5 @@ order: 10
## 使用指南
使用 `graph.registerBehavior` 自定义交互，教程参见 [自定义交互](/zh/docs/manual/advanced/custom-behavior)。
使用 `graph.registerBehavior` 自定义交互，教程参见 [自定义交互](/zh/docs/manual/advanced/custom-behavior)。
下面示例演示了如何使用自定义交互机制实现使用鼠标滚轮或触摸板双指拖动和缩放画布。