PDA

View Full Version : 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


//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 (http://www.w3schools.com/svg/tryit.asp?filename=trysvg_path)
and you can write the under 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
36412
so , in my extjs code I use the path and write

path : 'M 10 20 H 90 '
but it can not work.It has no js error,but has no line to display.
36414
so , I use firebug to see the html ,
36415
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:




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.



// 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/#!/guide/drawing_and_charting

luoyu
21 Jun 2012, 12:34 AM
Your Move to command (M) is wrong, it requires a comma, like in your svg example.

Try this path:




path : 'M 10,20 H 90 '

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

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:

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:


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

}
});
});

blopes
17 Jul 2013, 11:30 AM
You can add another series of type line to have a mix of bars and line

Cheers

Bruno

donluc007
7 Sep 2014, 8:32 AM
strokeStyle: 'black'