Ext.draw.Sprit to draw a horizontal line

**luoyu** · 20 Jun 2012 11:19 PM

Hi
I have a problem to draw a horizontal line use extjs 4。
My code

Code:

//addCircle is function ,use to draw a circle,it work normally
//the arguments panel ,you can regard as a window,and x,y is coordinate
addCircle : function(panel,x,y){
        var circle = new Ext.draw.Component({
            width: 100,
            height: 100,
            x : x-200,
            y : y-10,
            draggable : true,
            resizable: {
                dynamic: !Ext.isIE,
                pinned: false,
                preserveRatio : true,
                handles: 'all'
            },
            items: [{
                type: 'circle',
                fill: '#79BB3F',
                radius: 50,
                x: 50,
                y: 50
            }]
        });
        panel.add(circle);
    },
//addLine is function ,use to draw a line,it work bad
addLine : function(panel,x,y){
        var line = new Ext.draw.Component({
            width : 100,
            height : 100,
            x : x-200,
            y : y -10,
            draggable : true,
            resizable: {
                dynamic: !Ext.isIE,
                pinned: true,
                preserveRatio : true,
                handles: 'all'
            },
            items : [{
                type: 'path',
                stroke : 'blue',
                fill:'darkblue',
                'storke-width' : "4",
                path : 'M 10 20 H 90 '
            }]
        });
        panel.add(line);
    }

I want to draw a horizontal line.
I use svg test ,you can use the url test
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_path
and you can write the under code

HTML Code:

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<path d="  M 10,20 H 90" stroke="blue" fill="darkblue" stroke-width="4" />
</svg>

</body>
</html>

then we can see a horizontal line
图片1.jpg
so , in my extjs code I use the path and write

Code:

path : 'M 10 20 H 90 '

but it can not work.It has no js error,but has no line to display.
图片2.jpg
so , I use firebug to see the html ,
图片3.jpg
but,when i look the html,i think the code is same the above svg code.
I don't know why it can not work.
Thank you very much.

**johanhaest** · 20 Jun 2012 11:34 PM

Your Move to command (M) is wrong, it requires a comma, like in your svg example.

Try this path:

Code:

path : 'M 10,20 H 90 '

**johanhaest** · 20 Jun 2012 11:40 PM

You should also be aware that you're creating more than one canvas (surface) at the moment. And your giving one canvas only one Sprite. If you want the object to be in the same canvas you'll have to add sprites to one canvas.

Code:

// Create a draw component
var drawComponent = Ext.create('Ext.draw.Component', {
    viewBox: false
});


// Create a window to place the draw component in
Ext.create('Ext.Window', {
    width: 220,
    height: 230,
    layout: 'fit',
    items: [drawComponent]
}).show();


// Add a circle sprite
var myCircle = drawComponent.surface.add({
    type: 'circle',
    x: 100,
    y: 100,
    radius: 100,
    fill: '#cc5'
});


// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
    fill: '#ccc'
}, true);


// or animate an attribute on the sprite
myCircle.animate({
    to: {
        fill: '#555'
    },
    duration: 2000
});


// Add a mouseup listener to the sprite
myCircle.addListener('mouseup', function() {
    alert('mouse upped!');
});

More info: http://docs.sencha.com/ext-js/4-1/#!...g_and_charting

**luoyu** · 21 Jun 2012 12:42 AM

I have to create multiple surface.I must can control every sprite.For example,If i put line,circle,into a surface,when i drag the surface,the line sprite and circle must be dragged together.At fact,I have anthoer method:

Code:

addRect : function(panel,x,y){
        var rect = new Ext.draw.Component({
            width : 100,
            height : 30,
            x : x-200,
            y : y -10,
            draggable : true,
            resizable: {
                dynamic: !Ext.isIE,
                pinned: true,
                preserveRatio : false,
                handles: 'w e',
            items : [{
                type: 'rect',
                fill: '#79BB3F',
                x : 0,
                y : 0,
                width : 100,
                height : 30
            }]
        });
        panel.add(rect);

but the rect can display .
So i think may be the line path is wrong?
Thank you very much.

**johanhaest** · 21 Jun 2012 2:29 AM

Here is a code example:

Code:

// Create a draw component
        var drawComponent = Ext.create('Ext.draw.Component', {
            viewBox: false
        });


        // Create a window to place the draw component in
        Ext.create('Ext.Window', {
            width: 220,
            height: 230,
            layout: 'fit',
            items: [drawComponent]
        }).show();


        
        //Create the line
        var myLine = drawComponent.surface.add({
            type: 'path',
            fill: 'none',
            stroke: '#000',
            'stroke-width': 2,
            path: 'M 10,30 H90'
        }).show(true); //show(true) for automatic (re)draw

**Darshan25** · 12 Oct 2012 1:48 AM

same related question from my side as well.

I want to draw horizontal line on chart (Parallel to x axis ), how we can achieve that???

Please provide me you guidance.Its very urgent for me....

Please fine below code and let me know where i am wrong..

Thanks in advance.

Ext.onReady(function () {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
xField: 'year',
yField: ['comedy', 'action', 'drama', 'thriller'],
gutter: 80,
stacked: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data',
'listeners' : {
'itemmouseover' : function(event){
Ext.MessageBox.alert('TESTING...');
//event.series.chart.fireEvent('itemmousedown', event);
var drawComponent = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
viewBox: false,
gradients: [{
id: 'grad1',
angle: 90,
stops: {
0: {
color: 'black'
},
1: {
color: '#c6d8ed'
},
99: {
color: '#5f96db'
},
100: {
color: '#6594cf'
}
}
}],
items: [{
/*type: 'rect',
fill: 'url(#grad1)',
width: 700,
height:5,
x:0,
y: 50,
top:-20*/
/*type: 'path',
stroke : 'blue',
fill:'darkblue',
'storke-width' : "4",
path : 'M 10 20 H 90 ',
y:50*/
type: 'path',
fill: 'none',
stroke: '#000',
'stroke-width': 2,
path: 'M 10,30 H90'
}],

}).show(true);
}
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'bottom',
xField: 'name',
yField: 'data',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
},
label:{
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: 'black',
'text-anchor': 'middle'
},tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
}

}]
});

Ext.create('Ext.Button', {
text: 'Used Baseline',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
var drawComponent = Ext.create('Ext.draw.Component', {
renderTo: Ext.chart.Chart(),
viewBox: true,
items: [{
type: 'rect',
fill: 'black',
width: 700,
height:5,
x:10,
y: 50
}]
});

}
});
});

**luoyu** · 21 Jun 2012 12:34 AM

Originally Posted by johanhaest

Your Move to command (M) is wrong, it requires a comma, like in your svg example.

Try this path:

Code:

path : 'M 10,20 H 90 '

I has tried.But it also can not display.Thank you very much.

Ext.draw.Sprit to draw a horizontal line

Thread Tools

Search Thread

Display

Hybrid View

Unanswered: Ext.draw.Sprit to draw a horizontal line

Unanswered: Ext.draw.Sprit to draw a horizontal line

Tags for this Thread