SunXinFei
commented
3 years ago 高亮区域
首先我们讨论高亮区域的定位问题，目前所有的开源项目里面，无一例外使用的是元素选择器，且只支持唯一值，而不是直接使用{ top:200px, left:100px}，原因很简单，写死数值在不同分辨率下会出现区域位置错误的情况。
后面我们还会讨论高亮区域包含若干元素，如下图：
关于如何实现在阴影遮罩中高亮透出一块区域的问题，这里有三种主要的实现方式，依次讨论
- z-index
- box-shadow
- 上下左右四块拼接
- SVG的path
- SVG蒙版(mask)
- mix-blend-mode
- -webkit-mask
z-index
- 整页添加阴影遮罩（z-index:999999）
- 将要高亮的DOM元素z-index调高（z-index:9999998）
- 添加一个和DOM元素略大一些的白底区域，（z-index:9999999）
- _不足：这种方式高亮会限制高亮区域必须是dom存在的元素（要调整index），所以最开始聊的那种异形的高亮直接使用无法实现
- 补充：其实可以间接方式实现，如图三
高亮的DOM元素（示例：）
高亮的白底区域（示例：）
通过polyfill的方式：修改intro.js的helper的宽高以及position的来实现异形高亮
相关的开源项目： https://github.com/usablica/intro.js https://github.com/kamranahmedse/driver.js
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;//x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
其中第四个属性spread表示的是阴影的尺寸，利用这一点，将该值改得足够大，即可实现阴影遮照- box-shadow以内的元素就是反向高亮的元素
- 通过
border-radius: 20px;可以实现高亮区域圆角
上下左右四块拼接
- 选定元素区域
{ top: y, left: x, height: h, width: w, } - 上下左右区域那么可以依次得到
//上 { top: 0, left: 0, height: x, width: 100vw, } //下 { top: y+h, left: x, height: w, width: 100vh-y-h, } //左 { top: y, left: 0, height: x, width: 100vh-y, } //右 { top: y, left: w+x, height: 100vw-x-w, width: 100vh-y, } - 不足：单纯这种方式不能实现高亮区域圆角。
如头条的巨量引擎页面，示例
SVG的path
SVG的path属性如下，其中大写表示绝对位置，小写表示相对位置。 示例：https://jsfiddle.net/sunxinfei/rcboav85/3/
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath- 获取高亮区域的x,y,w,h
- 绘制并计算svg的path
- 给svg添加{with:100vw;height:100vh;position:fixed}的样式，充满屏幕
-
path计算核心代码为：
/** * Generates the svg path data for a rounded rectangle overlay * @param {Object} dimension - Dimensions of rectangle. * @param {number} width - Width. * @param {number} height - Height. * @param {number} [x=0] - Offset from top left corner in x axis. default 0. * @param {number} [y=0] - Offset from top left corner in y axis. default 0. * @param {number} [r=0] - Corner Radius. Keep this smaller than half of width or height. * @returns {string} - Rounded rectangle overlay path data. */ export function makeOverlayPath({ width, height, x = 0, y = 0, r = 0 }) { const { innerWidth: w, innerHeight: h } = window; return `M${w},${h}\ H0\ V0\ H${w}\ V${h}\ Z\ M${x + r},${y}\ a${r},${r},0,0,0-${r},${r}\ V${height + y - r}\ a${r},${r},0,0,0,${r},${r}\ H${width + x - r}\ a${r},${r},0,0,0,${r}-${r}\ V${y + r}\ a${r},${r},0,0,0-${r}-${r}\ Z`; }在线示例: https://jsfiddle.net/sunxinfei/b8gvjm0f/19/
相关的开源项目：
https://github.com/shipshapecode/shepherd
SVG蒙版(mask)
和上一个方法看起来很像，使用的svg，但是这个方法利用的是mask以及clipPath
- 这里也使用了
rect上下左右四块拼接，并且四角的圆角使用的是四个circle，思路比较新奇
mix-blend-mode
- 添加一个遮罩层DOM，css属性添加
mix-blend-mode: hard-light; - 遮罩层DOM中添加一个子元素（高亮区域），css添加背景色
background-color: gray;色值与遮罩层保持一致； - 不足：被高亮的元素必须为有背景颜色，如果元素背景色为透明，只会高亮元素内的有背景色的子元素；以及浏览器兼容性
在线示例: https://jsfiddle.net/sunxinfei/3kh1jezy/4/
相关的开源项目： https://github.com/gilbarbara/react-joyride
-webkit-mask
关于未来的属性-webkit-mask不做过多讨论，
http://jsfiddle.net/sunxinfei/hf4zmecq/3/ http://jsfiddle.net/break/8vrU7/
引导开源项目汇总
- https://github.com/usablica/intro.js 2500行的纯js原生的引导功能，不包含任何依赖，有完整的生命周期。 注：通过一些改造，可以实现任意区域高亮，结合Css属性pointer-events: none可以轻松实现鼠标事件屏蔽，以及通过完整的生命周期，可以实现跨路由的引导步骤状态保留。
- https://github.com/kamranahmedse/driver.js 类似intro.js的纯js原生的引导功能，区别就是driver.js的语法为ECMA6+。
- https://github.com/elrumordelaluz/reactour react的SVG原理的引导组件，源码简单且可读性很高，原理也很简单，满足基本的开发需求。
- https://github.com/gilbarbara/react-joyride 别样的高亮实现方式mix-blend-mode，react组件，源码可读性很高
- https://github.com/pulsardev/vue-tour vue的一款简易版插件，代码量非常的少，依赖jump.js以及popper.js，能满足基本简单的引导。
- https://github.com/easelinc/tourist
- https://github.com/heelhook/chardin.js 基于Jquery的引导功能插件
- https://github.com/shipshapecode/shepherd 使用到了svelte框架，svg渲染遮罩层，ECMA6+语法，设计模式，颗粒度拆分，源码可读性很高
Kun8018
YaoKaiLun
引导在项目中属于增加用户体验类，通过下一步、下一步的方式来使用户能够很快的对产品上手，或对产品的一些交互逻辑进行了解。前端增加用户体验类的东西比如有：骨架屏、动画、引导。网上实现的引导方式有很多，现在将实现的方式进行总结。
整体流程
引导组成部分
如图所示，引导一般分为如下几部分构成：