我正在尝试在两个网格面板之间绘制多条箭头线,但我只能绘制一个箭头,当我开始绘制第二个箭头时,第一个箭头没有显示。下面是我尝试过的代码。
这是我创建箭头的地方
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
// alert("raphael");
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 ).attr("fill","black").rotate((90+angle),x2,y2);
var linePath = this.path("M" + x1 + " " + y1 + " L" + x2 + " " + y2);
return [linePath,arrowPath];
};
drag initialization
onInitDrag : function(x,y){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
//alert("this.ddel :"+this.ddel.innerHTML);
this.proxy.update(this.ddel);
// fire start drag?
//i would say yes ;-)
this.onStartDrag(x,y);
},
/*
* onStartDrag is called when you initiate the drag action
* it stores the mouse coordinates and create the SVG canvas
*/
onStartDrag : function(x, y){
alert(Ext.getCmp('leftGridId'));
this.arrowStart = {x:x, y:y};
alert("on Start Drag :"+x+","+y);
this.raphaelCanvas = new Raphael(0,0,2000,2000); //could be better...
//apply body.no-cursor (cursor : none) to hide the cursor
//cursor:pointer is nice too
//alert("after StartDrag :"+x+","+y);
},
/*
* onDrag is called on mousemove
* it clears the canvas and draw the arrow again
*/
onDrag : function(e){
//alert("on drag");
//alert("raphael arrow");
this.raphaelCanvas.clear();
var arrow = this.raphaelCanvas.arrow(this.arrowStart.x, this.arrowStart.y, e.xy[0], e.xy[1],8);
// alert("after mapping");
},
/*
* onEndDrag is called when you drop whatever you were dragging
* it removes the SVG canvas from the document
*/
onEndDrag : function(){
alert("on end drag");
//this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
this.raphaelCanvas.renderfix();
if(!onStartDrag){
/this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
}
else{
onStartDrag();
}
}