Hello...
If they are fixed images you can draw using ExtJs Sprites.
Or if you want to draw dynamically then with the help of charts we can draw.
Just do chart configuration :
And chart has event like mouseenter, mousemove and mouseup. By using these event i prepared drawing lines dynamically...
Here is the example code :
Code:
points =[];listeners:{
mousedown :function( e, eOpts ){
var chart = Ext.getCmp('chartId');
points.push(e.getXY());
},mouseup :function( e, eOpts ){
debugger;
var chart = Ext.getCmp('chartId');
var x = e.getXY()[0]-560, y = e.getXY()[1],startX = points[0][0]-560, startY = points[0][1];
var 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);
points = [];
},mousemove :function( e, eOpts ){
if(points.length > 0){
var chart = Ext.getCmp('chartId'),startX = points[0][0]-560, startY = points[0][1];
var endX = e.getXY()[0]-560, endY = e.getXY()[1];
if( sprite == undefined){
console.log("cominga");
sprite = 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{
sprite.setAttributes({path:"M "+startX+" "+startY+" L "+endX+" "+endY});
}
chart.surface.add(sprite).show(true);
}
}
}
Or else you can also use Raphael Js...Thanks,
Venkatesh Teja.