基于Canvas渲染虚拟关系流

实现基于canvas画布实时渲染的虚拟对象关系流

视觉语言

竞赛系统下,通关模式中,将该模式的系统主题(宇宙)与该模式的比赛规则(按顺序答题)作为设计的需求统一考量,最终产出这一Demo。

首先确定通关模式下采用“宇宙”主题。

提炼“宇宙”元素:

  • 恒星
  • 行星
  • 卫星
  • 星际旅行
  • 黑洞
  • 陨石
  • 外星智慧体
  • … …

找出该主题下所有元素的暗喻,比如:

  • 行星——暗喻赛题。
  • 卫星——暗喻附加关系。
  • 星际旅行——暗喻答题顺序,“流”。

提炼暗喻考验的是设计师的想象力与发散思维。此阶段应尽可能多的发现元素可表示的暗喻,再根据具体界面筛选可利用的元素,拿比赛答题页面为例,界面上主要包含以上三种暗喻元素。

实现手段

实现手段是指前端工程师为了将交互设计输出的原型变现为真实可操作的页面而做的所有工作。

根据原型图和预期效果,前端从技术层面决策实现手段,这里我才用canvas实现,源于canvas灵活的绘图方式,选择实现手段主要考虑能否完美在线交互原型、性能!性能!性能!跨平台兼容性、跨终端适配等等方面。

优中择优,选择好最优的技术型之后,再思考具体到代码层面的实现手段,比如canvas分屏提升性能、requestAnimationframe API 技术、面向对象的思维方式与代码组织方式等。

交互方式

该Demo主要交互方式为鼠标交互,Demo中包括了鼠标按下、按下并移动、释放、滚轮事件,因此大部分事件为鼠标事件。

Demo中的鼠标事件并没有直接绑定到每一个画布上,而是将事件监绑定到全部画布的父容器上,让父容器起到事件委托的作用。这里采用事件委托原因有两个:

  • 性能考虑:基于事件冒泡的事件委托机制减少了注册注册的数量,提升用户代理性能。
  • 技术考虑:考虑到canvas分屏渲染机制,互为兄弟关系的canvas画布在父容器中绝对定位,纵向索引值控制彼此叠加次序(非包含关系因此他们兄弟间不存在冒泡机制),只有canvas画布的父容器中z轴索引值最高的canvas画布才能接收到事件并触发事件处理程序并向上冒泡。

所以委托所有canvas画布的父容器接收从子元素冒泡而来的事件并处理事件是最合理的方案。

前端实现关键

  • 拖拽“宇宙”沙箱
[mousedown] [mousemove] [moveup]
  • 缩放与缩放比例
[mousewheel] [*/1]
  • 虚拟元素监听鼠标事件
[click] [mouseover] [mouseout]
  • “流”
[setLineDash] [createLinearGradient]
  • canvas分屏
[HTMLCanvasElement.toDataURL] [getImageData]
授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2017年12月24日 周日
Github账号登录以留言