小程序UI设计-首次提出并实现鼠标绘制布局

工具简介：小程序layout设计工具，可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板，并且按照FlexBox方式可视化布局。自动生成wxml和wxss，复制到微信开发者工具中即可同步显示。视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

在进行工具开发和使用时，自己想要是能够直接在画布上通过鼠标滑动进行布局的绘制那该多么方便。最终实现了此功能。目前市面上看到的类似工具中只有我们提供了鼠标绘制布局的功能。
下面是基本的绘制过程

下图是在微信开发者工具中的预览效果

在画布中，按下鼠标后滑动，所显示的绿色区域代表要绘制的view。绘制view之后，通过工具的属性面板中设置flexbox的三个属性justify-content、align-items和align-content来决定内部组件的排列方式。

下面说一下鼠标绘制的原理。

此图的画布中有很多方格子。方格子是10px10px，这样一个宽300px高200px的view就会占用3020=600个方格。内部如果有一个宽200px高100px的view，就占用20*10=200个方格。通过这样的数学计算，便可以将一个区域通过占用方格的数量区分出多个view，便实现了鼠标绘制布局。
如果想更小的定义方格，可以通过属性面板的字体大小来设置。如下图：

绿色区域便代表绘制的view的大小。

详细的操作介绍请看视频
http://v.youku.com/v_show/id_XMTg0OTMzNTQ0MA==.html