PDA

View Full Version : Write Ext Js from Svg



froglion
1 Sep 2013, 11:28 PM
I have to write js file from svg file in one project, but I m new to Ext Js.
When I met the
<svg:g
transform="matrix(-3.04,0.47,-0.3484,-3.323,1082.3909,1076.3447)"
<path
d="m 200,249.02885 20,20 0,0 m -20,-20 -20,20 0,0"
...
<path
d="m 200,222.36218 20,20 0,0 m -20,-20 -20,20 0,0"
</g>

In js, I newed 4 ext.draw.sprites as 4 paths, the g tab I used the CompositeSprite to represent the group, in this case, how to apply the g:transform attribute to the 4 sprites I create ? I found no attribute named transform or matrix in CompositeSprite, for alternative, I tried sprite.matrix = new sprite.draw.matrix(a,b,c,d,e,f) directly, but it still can not work.

How can I solve this? ur help will be very appriciated.

froglion
2 Sep 2013, 10:43 PM
My js codes:
var path3798 = Ext.create("Ext.draw.Sprite", {
"type": "path",
"path": "m 200,249.02885 20,20 0,0 m -20,-20 -20,20 0,0",
"fill": "#00ff00",
"stroke": "#00ff00",
"stroke-width": 2,
"stroke-linecap": "butt",
"stroke-linejoin": "miter",
"stroke-miterlimit": 4,
"stroke-opacity": 1,
"stroke-dasharray": "none",
"x": 0,
"y": 0,
"translate": {
"x": this.x,
"y": this.y
}
});

var path3800 = Ext.create("Ext.draw.Sprite", { ...
var path3802 = Ext.create("Ext.draw.Sprite", { ...
var path3804 = Ext.create("Ext.draw.Sprite", { ...
...

var g3794 = Ext.create("Ext.draw.CompositeSprite", {
surface: this.getSurface()
});


g3794.add("path3798", path3798);
g3794.add("path3800", path3800);
g3794.add("path3802", path3802);
g3794.add("path3802", path3804);

var matrix = new Ext.draw.Matrix( -3.0406452, 0.47079412, -0.34840554, -3.3235252, 1082.3909, 1076.3447 );


Here I tried : g3794.matrix = matrix, but it doesn't work, how to apply the matrix to g3794 group, can anybody here help me ? ty in advance.

ettavolt
4 Sep 2013, 1:44 AM
Unfortunately, you need to .split() your matrix and specify the resulting object as transform: for every sprite.