0

2 つのグリッド パネル間に複数の矢印線を描画しようとしていますが、1 つの矢印しか描画できません。2 番目の矢印を描画し始めると、最初の矢印が表示されません。

これは私が矢印を作成しているところです

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

            }
4

1 に答える 1

0

コードが大幅に改善される可能性がありますが、2 つの矢印が表示され始めたら、これらの簡単な変更を試してみてください。

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

            }
于 2012-07-31T21:07:09.783 に答える