需求:
- 绘制多边形
- 可填充颜色
- 可设置文字
- 可移动,可删除
- 鼠标按住后,抬起之前线段应该尾随鼠标当前位置
- 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形
思考:
- 第一想到的是找现成的改一改,找来找去,就认为fabricjs还能够,只是研究了一下,发现样例太少,非常难短时间内上手
- 想到了近期一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到非常快就上手了
结果:
一天半时间完毕,效果例如以下:
注意:
- 不要使用style或者css对canvas的width和height设置值,否则会引起坐标等被放大的问题
- 使用jquery获取canvas的时候要使用 “$(‘#canvas‘).get(0)”,否则则取不到对应的对象
- 调色板使用的是“spectrum.js”
- 取值赋值採用json模式,使用过的是“jquery.json-2.4.js”
- 採用json赋值的时候,由于我对图形进行了js封装类,且带有自己定义方法,所以在赋值的时候会出现不认自己定义方法的问题,原由于解析json的时候,对象会被解析为object而不是我定义的对象,所以须要人为处理一下
- 所有代码+HTML一共600行,这在曾经是我全然不敢想象的,HTML5会带给我们如何的未来呢?值得期待。
时间: 2024-10-01 12:20:59