web上的交互图形绘制01

在web上的交互图形其实不是想象中的那么难，但是因为各种原因吧，我感觉还是非常难搞的一个事情，首先我们要考虑是使用什么技术。

在现在这个时代，想到web，想到图形我们都不用想的会说出html5。是的，的确没错，公司让我调研的也是html5上的绘图。

但是在调研了两天左右的时候我就已经崩溃了，canvas和mfc下的dc其实是一个东西，说实话只是封装了更多的东西，但是还是没有给图形面向对象话，这样的话，让我写一个交互型的图形处理就变得非常的困难，基本上就是从0开始的写一个库一类的。

想到库的我很快的也想到网络这么发达的今天一定有什么库是可以让我快速开发的，我就在度娘的引导下找到了许多并没有什么乱用的库，其中最让我蛋疼不已的是jsxgraph这个库，说实话我非常看好这个库，但是这个库连一个最简单的矩形都非常难画，我还要自己用公式去管理四个点四个边，还要旋转，拉伸，放大，于是我内心当时就是崩溃的。

之后又找到bonsai这个库，这个库确实是图形处理的，也同样是把所有的图形都独立成了对象，这样就方便我的操作了，但是让我再加入拉伸旋转的功能，在短时间内还是非常难搞的，就是说我还是需要使用大量的时间来写第二层的库。

最后我发现了一个非常好用的库，这个库在网上很少有人提到但是也是非常的实际好用，尤其是对web上的图形交互，他的名字是fabric

优点：直接提供了我们所需要的所有图形处理的功能，旋转，拉伸，拖拽

并可以自定义很多功能，包括自定义图形四周拖拽点到图形的距离

拖拽点的大小，颜色，透明度，以及8个拖拽点和1个旋转点的是否课件。

可以直接保存出json或者svg的xml数据，读取时可以直接导入图形。

支持多选图形，并集体旋转移动。当选择我选择的对象时，对象置顶。

缺点：对一些特殊的图形需要重新封装，以加强使用的舒适度，比如，直线，就需要重新定义两边的点，在拉伸的时候可以任意拖动，改变直线的角度，

曲线，需要添加一个外置的点，方便改变曲线的外形，比如二次曲线就要加入一个点

三次曲线就要加入两个点

如果是通过json导入的图形，那么我们之前设置的一些属性会出现问题。

最后我找到了一个已经很完美的demo，他不是这些库，但是非常好用，至少demo是这个样子的，mxgraph。

感兴趣的朋友可以搜一下，我也正在研究。有什么好玩的我会随时分享的。