第二节:使用渲染器
上一篇
第一节:定义场景
下一篇
第三节:增加交互
Loading...
在该系列教程中,我们将逐步实现一个简单的可视化场景,展示节点和边,并让它们具备拖拽、拾取等基本交互能力。
在上一节我们定义了一个简单的场景,在本节中,我们将学习如何使用渲染器完成渲染。本节示例
首先我们需要引入一个或多个渲染器,如果引入了多个,还可以在运行时切换。本例中我们只选择了一个 Canvas2D 渲染器:
import { Renderer } from '@antv/g-canvas';const renderer = new Renderer();
然后我们需要创建画布,使用上面引入的渲染器:
const canvas = new Canvas({container: 'container', // DOM 节点idwidth: 600, // 画布宽度height: 500, // 画布高度renderer,});
有了画布,我们可以把场景图中的两个节点和一条边加入画布,当然这一切要等待画布就绪之后。我们有两种方式获知画布何时就绪,一是监听 就绪事件,二是等待就绪的 Promise 返回:
canvas.addEventListener(CanvasEvent.READY, () => {canvas.appendChild(node1);canvas.appendChild(node2);canvas.appendChild(edge);});// 或者await canvas.ready;canvas.appendChild(node1);canvas.appendChild(node2);canvas.appendChild(edge);
此时就能看到渲染效果了,不过有些奇怪,边出现在了节点之上,甚至挡住了文本:
这个问题是由我们加入画布的各个图形顺序导致,我们最后才将“边”加入画布,根据画家算法,它是最后绘制的,因此出现在了最顶层。
最简单的解决办法就是修改顺序,先绘制边,再绘制节点:
canvas.appendChild(edge);canvas.appendChild(node1);canvas.appendChild(node2);
此时效果就正常了:
或者,我们也可以通过 zIndex
手动调整。
类似 CSS 中的 zIndex
,我们可以手动设置两个节点的绘制顺序,让它们比边高(默认为 0)即可:
node1.style.zIndex = 1;node2.style.zIndex = 1;
基础图形已经绘制出来了,下面让我们增加一些交互吧。