第四章 Vite4+Vue3+Vtkjs 实现模型旋转、截图、背景色切换等

一、介绍 

上一章节我在模型可视化区域加了一些图标，但是对应的功能都没有去开发，这期我们就来逐个去实现相应的功能。 组件的话我分为tooltip和vuetoolbar，很好理解，就是上下两个工具。可视化区域右上侧的功能主要是针对模型的一个旋转操作。 右下部分的工具主要是切换背景、截图、窗口分割。为什么要做这些功能，旋转的话可以快速达到我们要观察的角度， 比自己手动去拖拽更加的快和准确。截图和切换背景看个人需求。这些功能都比较的简单。 下面我会给出每个功能实现用到的具体API和使用方法。

二、安装依赖 

因为项目中我用到的scss，看个人习惯。安装less也可以。

yarn add sass sass-loader -D

三、设置背景色 

vtkFullScreenRenderWindow给我们提供了一个setBackground(background: number[])的方法去实现背景色的切换。比较简单

screenRender.setBackground(color)
renderWindow.render()

四、截图 

截图的方法有很多种，可以通过元素的js方法，也可以通过veu插件去截图。但我个人觉得这些都