最近在学习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),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合在一起完成的，于是只能想办法把箭头部分加入到曲线的顶端。然后就是各种报错啊，各种问题啊
（此处省略一万字）……终于，我放弃了……然后继续百度……
终于，发现另一哥们的帖子：
于是把他的代码考下来，运行，搞定！我……
泪奔之后，打开了官方的文档，然后，崩溃……
官网上写的清清楚啊……气死我了……
。然后，得出一个结论，先把官方文档看清楚再说……
