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