-
复制 drag-badge 文件夹到 对应文件夹内，如 components 文件夹
-
复制 draw 文件到 对应文件夹内，如 util 文件夹内
-
在页面中引入，参考此处
-
在页面中使用，如示例：
<badge name="cvs{{index}}" count="{{item.count}}" binddisappear="handleDisappear" />
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 用于设 Canvas 的 id，注意同一页面不可重复 | String | — |
| dot | 是否设置为红点模式（不显示数字） | Boolean | false |
| count | 展示的数字，默认大于99后，显示 99+ | Number | 0 |
| 事件名称 | 说明 | 返回值 |
|---|---|---|
| binddisappear | 当小红点清除时触发（已读） | — |
菜鸟写法，请大佬们批评指正！(Ｔ▽Ｔ)
网上的教程以安卓为主，小程序的几乎没有这类的文章，只有极简版
整体逻辑参考安卓的实现
- 点击的位置超出初始圆的范围，进入拖拽状态，画布缩放到全屏大小
- 在最大拖拽范围内，画初始圆，拖动圆，贝塞尔曲线连接带
- 超出最大拖拽范围，画拖动圆
- 结束拖拽，画布缩放到初始大小
- 在最大拖拽范围外，已读，气泡爆炸效果，自定义触发事件
- 在最大拖拽范围内
- 如始终未超出范围，回弹动画，恢复初始状态
- 如曾超出范围，恢复初始状态
一定要看过真机的效果！！！
-
Canvas 2D 暂时不支持真机调试，需使用真机预览
-
安卓和 iOS 使用
ctx.scale时的表现不一致，参考社区中的同类型问题最开始时，参照文档中的部分写法，将该部分抽为一处理缩放的函数。在真机测试时发现，安卓机拖动后，缩放比例很大，但 iOS显示如预期。原因大致可推断为安卓的scale在画布大小重设后不会初始化，导致多次叠加。
法一： 改变尺寸时使用
ctx.setTransform(1, 0, 0, 1, 0, 0)恢复坐标系，用于重新初始化真机的scale法二： 判断机型，如为安卓，只 scale 一次
-
iOS 取画布值异常
开始拖拽时，在缩放画布前，通过取画布的
_left，_top，结合初始圆的半径，推得放大画布后固定圆的坐标。在 iOS 上，发现_left，_top会变成 0。最后选择，在存画布信息时，就计算放大画布后固定圆的坐标，并保存到 data 中（嗯~ 我闻到了菜味儿...）
- iOS真机：开始拖动时较大概率会有一巨大变形小红点闪现
安卓真机：极小概率出现上述情况
原因推测：拖动状态已更新，使得样式已成功切换，并且已绘制红点；画布已完成清空，宽高变化，scale 缩放设置还未生效，为初始值，故红点巨大且变形。
- iOS真机：虽然在上述的坑中，已将固定圆坐标保存，但是仍存在坐标值异常的情况。表现为点击位置离初始圆范围很近，但没有出现贝塞尔连接带。