平面图之HTML5、Canvas、SVG
最近项目里遇上一楼宇画平面图,暂时还没什么想法,希望园子里的大虾和牛人们多指教、多指点、谈谈建议和想法也行、能深入到技术实现层面最好不过了,在此先谢过各位了!下面大致简单说下我项目里关于这一块的业务、数据结构和需求:
业务:项目下面有分期、分期下面有楼栋,分期下面还有特殊楼栋即别墅房间、楼栋下面有楼层、楼层下每层有房间。
数据结构: 项目表、分期表(项目ID)、楼栋表(分期ID)、房间表(楼栋ID)
实现的效果分两块:
一块是绘制(鼠标绘图,要求支持多边形、圆形、不规则图形);
一块是展示(通过选择项目、分期、楼栋展示之前绘制的相应图形);
画项目平面图的时候,上面画的就是分期和别墅房间(也可以直接画楼栋和特殊楼栋即别墅房间) 画分期平面图的时候,上面画的就是楼栋和别墅房间 画楼栋每一层平面图的时候,上面画的就是相应层的房间
注:平面图上的元素支持绑定数据、鼠标单击事件、双击事件、以及各种鼠标事件
点项目平面图上的分期可以链接到相应分期平面图 点分期平面图上的楼栋和别墅房间可以链接到相应楼栋第一层平面图和别墅房间平面图 点分期平面图上的楼栋可以链接到相应楼栋第一层平面图,通过选择该楼栋的不同层显示相应层的房间平面图