一、使用中遇到的问题或疑惑

这部分主要是对一些使用者可能感觉奇怪的现象进行解释并说明如此设计的原因,同时包括对一些可能触发的bug的说明。

数据改变是否会立刻触发页面刷新?

从结果来说,数据改变的确会立刻触发数据改变。那么,如果我们有类似如下的语句:

this.radius = 30;

你可能认为画笔会更新至少三次,而实际情况是,只刷新了一次。因此,你在改变数据的时候,无需过多的考虑刷新的问题,框架内部会在保证"立刻刷新"的情况下自动减小刷新频率。

不过,框架并不是总能监听到数据改变,比如下面的语句:

this.radiusArray[0]= 10;

由于我们目前没有进行深层次监听,也没有修改对象上的方法来加强数据监听,因此所有类似上面的语句监听都会失效。

温馨提示:根据使用者的反馈,如果在未来某一天发现深度监听等是有必要的,我们会考虑添加这些功能,同时会同步这里的说明。

持续改变页面大小会怎么样?

为了减少不必要的刷新,如果用户在很短的时间里不停的缩放浏览器导致画布的大小持续改变,我们不会立刻刷新画布,而是在用户停止缩放的时候刷新画布。

浏览器兼容问题

为了减小打包的体积,对于非必要的Polyfill文件我们没有进行内置,下面特别进行说明。当然,也包括一些别的浏览器相关的兼容问题。

IE浏览器

需要说明的是,对于IE浏览器,我们是从IE9+(包括9)开始支持的,请特别注意。

为什么缩放屏幕的时候画布无法自适应更新大小?
监听画布大小改变我们使用的是ResizeObserver对象实现的,由于IE浏览器不支持,因此,你需要引入对应的polyfill进行兼容。

如果你知道画布何时改变大小,也可以通过主动通知的方式进行兼容。

二、一些有用的技巧说明

如何更好的添加悬浮提示?

假设我们现在根据数据绘制了若干个矩形条目,鼠标悬浮在对应的矩形条目上会悬浮提示对应条目的数值(具体的悬浮可以自定义更好看的组件,这里只是为了说明问题就用文字代替)。

你会发现,鼠标需要停留一段时间才可以触发悬浮提示,这非常的不友好!

对于悬浮的场景,发生这样的结果并不是我们期望的,不过为了兼容大多数情况,我们不得已这样设计。幸运的是,我们提供了配置项来修改默认的动画机制:内置属性 / _animation,通过把这个配置项设置为quick就可以获得更好的悬浮效果。


你好2007
179 声望4 粉丝

走一步,再走一步。