合成举牌小人图片的组件

[fouber]

如果你第一次参与本项目，请阅读 这里 快速开始。

设计示意图：

功能描述：

• 合成效果参考 这里
• 用canvas进行图像生成，但最终调用 toDataURL 方法把它绘制到 img 标签中展示，这样才能让用户长按图片进行保存或分享
• vue组件接收 外部参数 scale 表示缩放等级，content 举牌内容，�color 背景色
• 利用vue的 watch 方式监听上述信息，一旦有修改，则立即重绘
• 推荐使用fis的 __inline 函数内嵌图像资源，减少异步请求的性能开销
• 每次合成图像，都随机选取小人
• 由于一期功能不支持选择牌子的颜色，所以举牌颜色固定为一种
• 实现刷新按钮，点击效果同合成逻辑
• 展示的内容可缩放（canvas合成时缩放，img不要缩放，所见即所得），以方便用户能完全看到举牌内容

组件代码：src/module/widget/display

编码规范：

https://github.com/idle-dog/upup/blob/master/docs/DEV.md#组件化开发

代码提交规范：

https://github.com/idle-dog/upup/blob/master/docs/PR.md

[sapjax]

没人领？ 我领了吧，正好熟悉一下Vue

[fouber]

@sapjax 赞一个

[sapjax]

@fouber


有些小人的胳膊和手对不齐。

[fouber]

@sapjax 第一个小人左侧好像没有留出空白，每个小人的左侧空白边距应该是一样的才对得上

[sapjax]

遗留问题todo

• 有时候图像显示不出来的bug
• 缩放后图像会模糊
• 缩放不应该重新绘制小人
• 文字transform参数没改成可配置
• 某些小人的手和胳膊没对齐