jquery - How to place the text inside the layer using kinetic js? -

i new kineticjs & canvas

i generating map via kineticjs & canvas using svg path....

map has been rendered successfully..

i need place text center of each layer in canvas.

i try achieve, still unable parse text layer.

please see jsfiddle link below.

using method generating method

var simpletext = new kinetic.text({     x: path.getx(),     y: path.gety(),     text: key,     fontsize: 24,     fontfamily: 'calibri',     width:path.getwidth() ,     align: 'center',         fill: 'white' }); 

kindly advice - js fiddle

this jsfiddle: http://jsfiddle.net/edward_lee/dqhzjnut/18/

you need calculate bound of each path place text center of path. find minimum x, y , maximum x, y in path.dataarray has svg data.

var minx = 9999; var miny = 9999; var maxx = -1; var maxy = -1;  path.dataarray.foreach(function(data){     if(data.command == 'c' || data.command == 'l'){         if(data.start.x < minx) minx = data.start.x;         if(data.start.x > maxx) maxx = data.start.x;         if(data.start.y < miny) miny = data.start.y;         if(data.start.y > maxy) maxy = data.start.y;     } }); 

and place kinetic.text center of path

var simpletext = new kinetic.text({     x: (minx + maxx) / 2,     y: (miny + maxy) / 2,     text: key,     fontsize: 24,     fontfamily: 'calibri',     align: 'center',         fill: '#c00' });  

---

this reply comment

---

to resize canvas according screen resolution, event handler required on window resize event.

window.onresize = function(e){     ... } 

in handler, resize stage according window inner size, set scale of stage, , draw map layer. set proportional constant of scale 1/800.

stage.setwidth(window.innerwidth); stage.setheight(window.innerheight); stage.scalex(window.innerwidth/800); stage.scaley(window.innerwidth/800); maplayer.draw(); 

to change text color when mouse hover path, can use mouseover handler attached on paths. first, need connect path , text decide text color changed when mouse hover path. kinetic.path object not use 'text' property, i'll path.text point simpletext.

path.text = simpletext; 

then change color of path.text

path.on('mouseover', function () {     this.setfill(bahrainmap.governorates[this.attrs.id].hovercolor);     this.text.fill('#00cc00');     maplayer.draw(); }); 

there isn't api set background color, can use css code.

#container{     background-color:#ccc; }