Raphaël学习笔记一

最近在学习HTML5 canvas，然后悲剧的发现这东西只能用来绘图却不能用来交互……假设你在画布上画了一个圆，然后想写一个事件来进行DD操作。对不起，除非你的圆里有一张图片，否则你就得通过那个圆所在的像素来找它了。杯具啊，据说要替代flash，光这一点上就没希望了……

然后想到了Raphaël，其实早就知道Raphaël的大名，也尝试过一两次。只是本人是JAVA程序员，对SVG那东西不太了解，一看一大堆的 M100,100L90,45L160,65V34……就头晕，后来果断放弃了，本来打算在canvas那里找点安慰，没想到却更加悲剧……

扯远了。这篇博客只是记录本人使用当中遇到的困难和解决方法。没涉及的东东，请大家看官网吧……

先说说我学这东西的原因吧：本来是想做一个流程设计器的，不想用flash，在经历了上面所说的挫折后，发现Raphaël首页上有一个例子和我想要的东西很相似：

可以DD的节点，自动连接的曲线，一切都是那么的完美，如果再有一个小小的箭头的话就完美了……于是，动手开始做……

由于本人不熟，开始baidu，找到一哥们写的：

Raphael.fn.arrow = function (x1, y1, x2, y2, size, strokeWidth, color) {
                        var angle = Math.atan2(x1 - x2, y2 - y1);
                        angle = (angle / (2 * Math.PI)) * 360;
                    
                        var arrowPath = this.path("M" + x2 + " " + y2 + " L" + (x2 - size) + " " + (y2 - size) + " L" + (x2 - size) + " " + (y2 + size) + " L" + x2 + " " + y2 ).rotate((90 + angle), x2, y2);
                        var linePath = this.path("M" + x1 + " " + y1 + " L" + x2 + " " + y2);
                    
                        //styles
                        arrowPath
                            .attr('fill',   color || 'black')
                            .attr('stroke', color || 'black');
                        linePath
                            .attr('stroke-width', strokeWidth || 1)
                            .attr('stroke', color || 'black')
                            .attr('color',  color || 'black');
                        return [linePath,arrowPath];
                    };

这不正是我想要的吗？

但是当我想要加入到这个例子当中时，发现不行。几个元素通过path相连，但path是经过弯曲的。做过矢量图的童鞋都明白是怎么回事。由于上面的解决方法是通过两个path合在一起完成的，于是只能想办法把箭头部分加入到曲线的顶端。然后就是各种报错啊，各种问题啊（此处省略一万字）……终于，我放弃了……然后继续百度……

终于，发现另一哥们的帖子：

于是把他的代码考下来，运行，搞定！我……

泪奔之后，打开了官方的文档，然后，崩溃……

官网上写的清清楚啊……气死我了……。然后，得出一个结论，先把官方文档看清楚再说……