Question

我正在尝试在两个网格面板之间绘制多条箭头线，但我只能绘制一个箭头，当我开始绘制第二个箭头时，第一个箭头没有显示。下面是我尝试过的代码。

这是我创建箭头的地方

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();
                        }

            }

Answer 1

您的代码可能会有严重的改进，但如果在;;您的两个箭头开始出现，请尝试这些快速更改....

 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];
        };

this.raphaelCanvas = new Raphael(0,0,2000,2000);
this.raphaelCanvas.renderfix();
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();
                        }

            }

如何在extjs网格面板中绘制多个箭头线

1 个答案: