问题场景1:当我们将画布大小设置为浏览器窗口大小的时候,如果我们画布中的元素过多,而浏览器高度不够的话,超出部分则不会在画布中被显示出来
问题场景2:当我们需要往画布中添加元素时,如果画布高度不够,添加的元素不能被显示出来
解决:如果我们想让画布自适应响应式的话,可以使用 paper.fitToContent
使用:在每次渲染节点,链接等元素后,设置 下面的属性,以达到画布大小自适应内容
// 渲染画布的 div 元素
const canvasRect = this.$refs.canvas.getClientRects()[0]
this.paper.fitToContent({ padding: 10, minWidth: canvasRect.width, minHeigth: canvasRect.height })
JointJS有关画布 paper 的属性,可以参考官网演示:
Paper attributes