一、应用中遇到的问题或纳闷
这部分次要是对一些使用者可能感觉奇怪的景象进行解释并阐明如此设计的起因,同时包含对一些可能触发的 bug 的阐明。
数据扭转是否会立即触发页面刷新?
从后果来说,数据扭转确实会立即触发数据扭转。那么,如果咱们有相似如下的语句:
this.radius = 30;
你可能认为画笔会更新至多三次,而理论状况是,只刷新了一次。因而,你在扭转数据的时候,无需过多的思考刷新的问题,框架外部会在保障 ” 立即刷新 ” 的状况下主动减小刷新频率。
不过,框架并不是总能监听到数据扭转,比方上面的语句:
this.radiusArray[0]= 10;
因为咱们目前没有进行深层次监听,也没有批改对象上的办法来增强数据监听,因而所有相似下面的语句监听都会生效。
舒适提醒:依据使用者的反馈,如果在将来某一天发现深度监听等是有必要的,咱们会思考增加这些性能,同时会同步这里的阐明。
继续扭转页面大小会怎么样?
为了缩小不必要的刷新,如果用户在很短的工夫里不停的缩放浏览器导致画布的大小继续扭转,咱们不会立即刷新画布,而是在用户进行缩放的时候刷新画布。
浏览器兼容问题
为了减小打包的体积,对于非必要的 Polyfill 文件咱们没有进行内置,上面特地进行阐明。当然,也包含一些别的浏览器相干的兼容问题。
IE 浏览器
须要阐明的是,对于 IE 浏览器,咱们是从 IE9+(包含 9)开始反对的,请特地留神。
为什么缩放屏幕的时候画布无奈自适应更新大小?
监听画布大小扭转咱们应用的是 ResizeObserver 对象实现的,因为 IE 浏览器不反对,因而,你须要引入对应的 polyfill 进行兼容。
如果你晓得画布何时扭转大小,也能够通过被动告诉的形式进行兼容。
二、一些有用的技巧阐明
如何更好的增加悬浮提醒?
假如咱们当初依据数据绘制了若干个矩形条目,鼠标悬浮在对应的矩形条目上会悬浮提醒对应条目标数值(具体的悬浮能够自定义更好看的组件,这里只是为了阐明问题就用文字代替)。
你会发现,鼠标须要停留一段时间才能够触发悬浮提醒,这十分的不敌对!
对于悬浮的场景,产生这样的后果并不是咱们冀望的,不过为了兼容大多数状况,咱们不得已这样设计。侥幸的是,咱们提供了配置项来批改默认的动画机制:内置属性 / _animation,通过把这个配置项设置为 quick 就能够取得更好的悬浮成果。