canvasrun
v1.0.0
Published
像css一样写canvas
Downloads
2
Readme
1、技术选型
特点 | css | canvas | ---- | ---- | ---- | 成本| 简单,少量api就可以做复杂动画| 大量代码做简单动画 性能|可以自动做到优雅降级|需要做代码兼容 灵活性|较差|非常灵活 多状态切换|复杂不好操作|可以优雅做到 临界检测|不能精确做临界点判断|可以做到
总结:
- css: 适合做单一重复少状态切换切复杂的动画
- canvas:适合做多状态切换简单动画
2、思考(如何权衡)
- 可维护性
- 开发效率
- 性能
sequenceDiagram
可维护性->>性能: 逻辑清晰,无冗余代码
可维护性->>提升开发速度: 可理解性、可修改性、可测试性
什么是可维护性代码
- 可读性
- 适用性
- 可扩展性
- 可调试性
gantt
dateFormat YYYY-MM-DD
section 个人书店
开发用时6天,4天开发框架,2天写需求: 01, 6d
section 图书漂流
开发4天,1天完善框架,1天设计动效,2天写需求: 01, 4d
section 下一个
2天写需求:01, 2d
3、绘制canvas
- 性能(使用最优性能的计算方式、将大量计算放在编译中执行、超出canvas外的视图不予绘制)
- 布局(用css的api写canvas)
- 裁剪图片
- 文字处理
- 粒子效果
- 优化
框架结构图
graph TD
A[绘制canvas] --> B[compile 编译]
A --> |编译完成后| K[绘制]
A --> C[封装事件]
B --> H[生成DomTree]
A --> F[注册钩子函数]
B --> D[建立父子关系]
B --> E[注册事件]
B --> G[注册class]
K --> J[获取DomTree并建立层级关系]
J --> I[开始绘制]
I --> M[绘制图层]
I --> O[储存事件]
P[用户触发后] --> C
M --> ST[视图绘制]
M --> LZ[粒子绘制]
LZ --> CCLZ[粒子储存]
LZ --> HZLZ[粒子绘制]
C --> O
ST --> JX[矩形绘制]
JX --> CJ[图片处理]
JX --> BG[背景处理]
JX --> CJJ[裁剪]
ST --> SF[缩放]
ST --> XZ[旋转]
ST --> FONT[文字绘制]
FONT --> MH[多行文字]
FONT --> HH[文字换行]
FONT --> OC[宽度计算]
FONT --> OH[超出展示]
FONT --> WW[文字渲染等等]
graph TD
A[交互] --> B[事件]
B --> BS[touchstart]
B --> BM[touchmove]
B --> BE[touchend]
B --> BC[click]
A --> C[操作DOM]
C --> CE[通过class获取dom]
C --> CF[0级DOM事件]
graph TD
A[工具] -->|解析字符串| B[analysisString]
A -->|计算文字宽度| BS[computedText]
A -->|下载单张图片| BM[createdImg]
A -->|canvas生成图片| BE[createdImageUrl]
A -->|下载多张图片并返回进度| BC[downloadFile]
A -->|判断是否为纯对象| CH[isPlainObject]
A -->|获取纯对象的所有key| CE[objectkeys]
api
name|type|描述 | :- | :- | :- | canvas|canvas|canvas元素 ctx|ctx|canvas上下文 config|DOM[] |配置 gain|number| canvas放大倍数 mounted|func| 编译之后,canvas绘制完成调用 created|func| 在创建之初,编译之前
name|type|描述 | :- | :- | :- | startTime | number| touchstart触发时间 endTime |number| touchend触发时间 startClientX |number| touchstart触发x坐标 startClientY |number| touchstart触发y坐标 endClientX |number| touchsend触发x坐标 endClientY |number| touchsend触发y坐标 moveClientX |number| touchmove触发x坐标 moveClientY |number| touchmove触发y坐标 speed |{x:number,y:number}| 滑动速度对象 x方向速度 y方向速度 单位1000px/s $apply()|func:viod|更新画布,会触发编译 draw()|func:viod|更新画布,不会触发编译 getClassList|get func: {className: string[]}| 获取class
包括返回所有DOM数据以外,额外返回
name|type|描述 | :- | :- | :- | e.self | object| 得到此元素本身 e.parent | object| 得到此元素父级 e.index | number| 属于第几层级元素
name|type|描述|是否可继承 | :- | :- | :- | :- | click|func| 点击事件| 否 touchmove|func| touchmove事件| 否 touchstart|func| touchstart事件| 否 touchend|func| touchend事件| 否 children|DOM[]|子集 | 否 w|number|宽 |是 h|number|高 | 否 x|number|x坐标 (在子元素中使用会被视为绝对定位,以屏幕左上角开始计算)| 否 y|number|y坐标 (在子元素中使用会被视为绝对定位,以屏幕左上角开始计算)| 否 fontSize|number|字体大小| 是 color|string|字体颜色 |是 opcity|number|透明度 |是 zIndex|number|层级| 否 whiteSpace|string opt['nowrap'] | 父级宽度可被撑开,整行展示| 否 class|string|className| 否 backgroundImage|HTMLCanvasElement & string|背景图片| 否 maxLine|number|文字最大展示行数| 否 scale|{x:number,y:number}|缩放| 否 rotate|number & string|旋转(单位deg) | 否 particle|{size:number,d:number}|粒子 size(粒子大小)d(粒子间距)| 否 border|string|边框(如1rpx solid red 或者 1rpx dashed:10:3 red)10为线宽3为间距,可不写默认10:3| 否 lineHeight|number|行高| 否 text|string|文字(有这个就会绘制文字)| 否 textAlign|string| start默认 center居中 end| 否 backgroundColor|string|背景颜色| 否 backgroundSize|{w:number,h:number}|背景尺寸| 否 backgroundPosition|{x: number,y:number}| 背景位置,从元素左上角计算| 否 paddingLeft|number|内边距| 否 paddingTop|number|内边距| 否 marginLeft|number|外边距 (只从父级左上角计算,与兄弟元素无关)| 否 marginTop|number|外边距 (只从父级左上角计算,与兄弟元素无关)| 否 canLRSlide|boolean|可以左右滑动 默认不可以| 否 overText|string|超出展示的文字 如:展开 | 否 overTextColor|string| 超出展示的文字的颜色| 否