新用户引导库-driverjs

server/2024/11/29 14:49:31/

一个比好用的新用户引导的库 driverjs

在做这个功能时，首先要确定目标是什么样子的，如果只是随意点击下一步下一步，那我感觉可能用图片轮播图的方式会快一点，更容易解决且方便，想要什么步骤只需要更改图片就好，但是要管理功能的话，就可以使用这个库。

可以使用新版的，新版本是通过 SVG 来显示蒙层的不是通过一个 div 标签来显示一个大的蒙层，之后再通过 position 和 z-index 来控制层级的显示。

在实现这个功能，是有多种方法实现的，首先可以思考一下新版的实现方式

新版实现方式：SVG

主要是通过 SVG 的属性 fill-rule:evenodd clip-rule:evenodd path

首先确定高亮 DOM的位置，计算出距离窗口上下左右的距离
通过 path 根据计算的距离勾勒出高亮部分的位置
然后通过 fill-rule:evenodd clip-rule:evenodd 填充和裁切，把高亮部分的位置裁切掉
最后就实现了，就和剪窗花的原理一样，剪出一个高亮的形状，让 dom 元素透过来

旧版本实现方式：`position` 和 `z-index`

部分实现差不多，都是需要计算出高亮dom元素的大小和距离窗口上下左右的距离，不同的是通过position 和 z-index 来控制层级的显示

首先确定高亮dom的位置，计算出距离窗口上下左右的距离
然后创建一个新的 dom 元素来作为高亮元素的背景，
蒙版是 position: fixed; 在整个窗口
需要高亮的元素是会添加两个class 分别是添加 position: relative!important; 和 z-index: 100004!important;
然后高亮元素高亮元素的背景蒙层的层级分别是 100004 100003 100002 就是高亮元素在最上层，元素背景在中间层，蒙层在下一层，原本的 DOM 文档流在蒙层的下一层

这个设计到浏览器的渲染原理，在绘制时，会创建层叠上下文，

可以在这个位置查看一下层级的顺序就可以明白他的原理

然而这种实现方式可能会产生一个问题，就是在具有 transform 属性的DOM中包含positon 元素的话，可能会出现一些问题，因为 transform 有可能开启 GUI 渲染，然后创建一个独立的图层，而 postion 元素由于父级是transform 所有会和它在同一个图层。