FocusElement 聚焦元素
阅读时间约 2 分钟
点击元素时,将元素聚焦到视图中心。
createGraph({data: {nodes: [{ id: 'node-1', style: { x: 200, y: 100 } },{ id: 'node-2', style: { x: 360, y: 100 } },{ id: 'node-3', style: { x: 280, y: 220 } },],edges: [{ source: 'node-1', target: 'node-2' },{ source: 'node-1', target: 'node-3' },{ source: 'node-2', target: 'node-3' },],},node: { style: { fill: '#7e3feb' } },edge: { style: { stroke: '#8b9baf' } },behaviors: [{type: 'focus-element',key: 'focus-element',},],plugins: [{ type: 'grid-line', size: 30 }],animation: true,},{ width: 600, height: 300 },(gui, graph) => {const options = {key: 'focus-element',type: 'focus-element',animation: true,enable: true,};const optionFolder = gui.addFolder('ZoomCanvas Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'animation');optionFolder.add(options, 'enable');optionFolder.onChange(({ property, value }) => {graph.updateBehavior({key: 'focus-element',[property]: value,});graph.render();});},);
focus-element
| string
此插件已内置,你可以通过 type: 'focus-element'
来使用它。
是否启用动画以及动画配置
boolean | ((event: IElementEvent) => boolean) Default:
true
是否启用聚焦功能
destroy(): void;