kinetic texts：draggable没有工作

Question

＆＃13;

＆＃13;

var stages = new Array() ;
			var limites = new Array() ;
			numStage=0;
			r = {
			'x':65,
			'y':120,
			'xwidth':335,
			'yheight':210
			};
			limites.push(r);
			
			stages[numStage] = new Kinetic.Stage({
				container: 'cmg_canvas_'+numStage,
				width: 450,
				height: 450
			});
			//creation image
			obj = new Image();
			obj.src = 'http://i.imgur.com/zFZgKuS.jpg';
			image = new Kinetic.Image({
				image: obj,
				width: 450,
				height: 450
			});
			// add image to calque
			layer = new Kinetic.Layer();
			layer.add(image);
			stages[numStage].add(layer); //add image to canvas
						
			layer = new Kinetic.Layer();
			//set limit x y h l
			/*var rect = new Kinetic.Rect({
				name: 'limite',
				x: limites[numStage].x,
				y: limites[numStage].y,
				width: limites[numStage].xwidth,
				height: limites[numStage].yheight,
				stroke: 'black',
				strokeWidth: 0.5
			});*/
			//layer.add(rect);// add to canvas
			stages[numStage].add(layer);
			
			$('.cmg_text').live('blur', function(){
				
				idText = 'cmg_line0';	
				
				numStage = 0;
				
				drawTextPath(numStage, idText,$(this).val(),50,22,numStage);
				//text = getText(this).text;
						
			});
			
			
			function getSVG(x,y,w,verif) {
					halfw = parseFloat((w/2).toFixed(2));
					x1 = parseFloat((halfw/2).toFixed(2));
					x2 = parseFloat(halfw + x1);
					
					if(parseInt(verif))
					{
						y1 = parseFloat(y) * 2 +18;
						y2 = parseFloat(y) * 2 +18;
					}
					else
					{
						y1 = -18;
						y2 = -18;	
					}
					
					str = 'M '+x+','+y+' C '+x1+','+y1+' '+x2+','+y2+' '+w+','+y;
					return str;
				}
			
			function drawTextPath(numStage, textId,text,valueSlider, newFontSize,numStage){
					//'M 0,115 C42,-18 126,-18 165,115';
					//'M 0,115 C45,230 180,230 180,115';
					var arcOnly = 0;
					if(textId == 'cmg_line0')
					{
							console.log('limites[numStage].yheight/2'+limites[numStage].yheight/2);
							console.log('limites[numStage].xwidth'+limites[numStage].xwidth);
						svg  = getSVG(0,valueSlider,valueSlider*6.3,0);
						arcOnly = 0;
					}
				//alert(svg);
					console.log(parseFloat(limites[numStage].y));	
					console.log(parseFloat(arcOnly));	
					console.log(parseFloat(limites[numStage].y - arcOnly));	
						
					var layer = new Kinetic.Layer({name:'textPathLayer',draggable:true});
					var textpath = new Kinetic.TextPath({
						name:'TextPath',
						id: textId,
						//x: 0,
						//x: limites[numStage].x + limites[numStage].xwidth/2,
						//y: 0,
						//y: limites[numStage].y + limites[numStage].yheight/2,
						x: limites[numStage].x ,
						y: limites[numStage].y + limites[numStage].yheight/2,
						fill: '#000',
						fontSize: newFontSize,
						fontFamily: 'Arial',
						text: text,
						//offsetX:0,
						//offsetY:0,
						draggable: true,
						dragBoundFunc: function(pos){
							p = textParams(this, pos);
							return {x: p.newX, y: p.newY};
							},
							
						data: svg
					});
						
						//
					layer.add(textpath);
						 
					stages[numStage].add(layer);
						//layer.moveToTop();
					//layer.draw();
						//stages[0].draw();
				}

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.6.0/kinetic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cmg_canvas_0"></div>
			<input type='text' class='cmg_text' />

＆＃13;

＆＃13;

＆＃13;

我必须使用kineticjs绘制一个可拖动的文本路径，文本由输入文本给出，动作以模糊方式触发。 我有一个包含3层的舞台; 背景图层，文本路径图层。 我的问题是textpath中的draggable不起作用， 我试图将文本图层设置在顶部，但我没有让它可以拖动。

这是我jsfiddle 我对内层问题有疑问。 提前谢谢。