1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    84
    Answers
    1
    Vote Rating
    3
    DineshGudikandula is on a distinguished road

      0  

    Default Answered: Draw straight lines with mouse on surface using Extjs

    Answered: Draw straight lines with mouse on surface using Extjs


    Hi All,
    I want to Draw straight lines using mouse on chart surface , can any one provide sample code or guide me in right direction.I am using extjs4 version.
    Dinesh GK

  2. Thanks @Gary Schlosberg for your reply...

    Finally i found solution for this.This below code is to draw line thought mouse.

    Code:
    Ext.application({
         autoCreateViewport: false
        ,name: 'Custom Sprite Draw'
        ,launch: function() {
            Ext.create('Ext.chart.Chart', {
                renderTo: Ext.getBody(),
                width: 600,
                height: 300,
                animate: true,
                store: [],
                customSprite: undefined,
                startPoint : [],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    title: 'Y AXES',
                    grid: true
                }],
                series: [{
                    type: 'line',
                }],
                listeners:{
                    mousedown :function( e, eOpts ){
                        this.startPoint.push(e.getXY());
                    },
                    mouseup :function( e, eOpts ){
                        var chart = this,
                            chartOffsetLeft = e.target.parentNode.offsetLeft,
                            x = e.getXY()[0]-chartOffsetLeft, 
                            y = e.getXY()[1],
                            startX = this.startPoint[0][0]-chartOffsetLeft, 
                            startY = this.startPoint[0][1],
                            sprite = Ext.create('Ext.draw.Sprite', {
                                  type: 'path',
                                  path : "M "+startX+" "+startY+" L "+x+" "+y,
                                  stroke: 'green',
                                  surface: chart.surface,
                                  "stroke-width": 2,
                                  opacity: 0.5
                                });
                        chart.surface.add(sprite).show(true);
                        this.startPoint = [];
                        
                    },
                    mousemove :function( e, eOpts ){
                        
                        if(this.startPoint.length > 0){
        
                            var    chartOffsetLeft = e.target.parentNode.offsetLeft,
                                 chart = this,
                                 startX = this.startPoint[0][0]-chartOffsetLeft, 
                                 startY = this.startPoint[0][1],
                                endX = e.getXY()[0]-chartOffsetLeft, 
                                endY = e.getXY()[1];
                            if( chart.customSprite == undefined){
                                chart.customSprite = Ext.create('Ext.draw.Sprite', {
                                      type: 'path',
                                      animate:true,
                                      path : "M "+startX+" "+startY+" L "+endX+" "+endY,
                                      stroke: 'green',
                                      surface: chart.surface,
                                      "stroke-width": 2,
                                      opacity: 0.5
                                    });
                            }else{
                                chart.customSprite.setAttributes({path:"M "+startX+" "+startY+" L "+endX+" "+endY});
                            }
                                chart.surface.add(chart.customSprite).show(true);
                        }
                    }
                }
            });
        }
    });

  3. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,850
    Answers
    155
    Vote Rating
    66
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    I couldn't find any examples that do that, but you can draw lines using Ext.draw.Component.
    http://docs.sencha.com/extjs/4.2.1/#...draw.Component

    Perhaps you could use the mousemove event on the draw component and draw based on the coordinates.
    Get on the Fast Track with Sencha Training http://sencha.com/training

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    84
    Answers
    1
    Vote Rating
    3
    DineshGudikandula is on a distinguished road

      0  

    Default


    Thanks @Gary Schlosberg for your reply...

    Finally i found solution for this.This below code is to draw line thought mouse.

    Code:
    Ext.application({
         autoCreateViewport: false
        ,name: 'Custom Sprite Draw'
        ,launch: function() {
            Ext.create('Ext.chart.Chart', {
                renderTo: Ext.getBody(),
                width: 600,
                height: 300,
                animate: true,
                store: [],
                customSprite: undefined,
                startPoint : [],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    title: 'Y AXES',
                    grid: true
                }],
                series: [{
                    type: 'line',
                }],
                listeners:{
                    mousedown :function( e, eOpts ){
                        this.startPoint.push(e.getXY());
                    },
                    mouseup :function( e, eOpts ){
                        var chart = this,
                            chartOffsetLeft = e.target.parentNode.offsetLeft,
                            x = e.getXY()[0]-chartOffsetLeft, 
                            y = e.getXY()[1],
                            startX = this.startPoint[0][0]-chartOffsetLeft, 
                            startY = this.startPoint[0][1],
                            sprite = Ext.create('Ext.draw.Sprite', {
                                  type: 'path',
                                  path : "M "+startX+" "+startY+" L "+x+" "+y,
                                  stroke: 'green',
                                  surface: chart.surface,
                                  "stroke-width": 2,
                                  opacity: 0.5
                                });
                        chart.surface.add(sprite).show(true);
                        this.startPoint = [];
                        
                    },
                    mousemove :function( e, eOpts ){
                        
                        if(this.startPoint.length > 0){
        
                            var    chartOffsetLeft = e.target.parentNode.offsetLeft,
                                 chart = this,
                                 startX = this.startPoint[0][0]-chartOffsetLeft, 
                                 startY = this.startPoint[0][1],
                                endX = e.getXY()[0]-chartOffsetLeft, 
                                endY = e.getXY()[1];
                            if( chart.customSprite == undefined){
                                chart.customSprite = Ext.create('Ext.draw.Sprite', {
                                      type: 'path',
                                      animate:true,
                                      path : "M "+startX+" "+startY+" L "+endX+" "+endY,
                                      stroke: 'green',
                                      surface: chart.surface,
                                      "stroke-width": 2,
                                      opacity: 0.5
                                    });
                            }else{
                                chart.customSprite.setAttributes({path:"M "+startX+" "+startY+" L "+endX+" "+endY});
                            }
                                chart.surface.add(chart.customSprite).show(true);
                        }
                    }
                }
            });
        }
    });
    Dinesh GK

Thread Participants: 1