一旦我在其中添加文本kinetic.js，调整大小矩形不起作用

Question

我有代码来调整kinetic.js中的rect，它只能运行一次。之后它不会使rect可调整大小，这里我试图在rect中添加文本但是一旦我在rect中设置文本，点击＆＃34; box＆＃34;第二次没有触发，请建议

                                var box = new Kinetic.Rect({                             
                                    x : relativeX,
                                    y : relativeY,
                                    offset : [ 50, 25 ],
                                    width : 100,
                                    height : 50,
                                    fill : 'yellow',
                                    stroke : 'black',
                                    strokeWidth : 1,                             
                                    id:'comment'  
                                });    
                                group.add(box);     
                                 var simpleText = new Kinetic.Text({
                                        x : relativeX - 48,
                                        y : relativeY - 30,                      
                                        text : 'Note',
                                        fontSize : 15,
                                        fontFamily : 'Calibri',
                                        width:box.getWidth(),
                                        height:box.getHeight(),
                                        padding: 4,
                                        fill : 'green',
                                        id:"textBox"    
                                });
                                 group.add(simpleText); 
                                var circle1 = new Kinetic.Circle({    
                                    x: relativeX+50,
                                    y:relativeY+25,    
                                    radius: 4,
                                    fill: 'red',
                                    stroke: 'black',
                                    strokeWidth: 1,                        
                                    draggable: true,
                                    visible:false
                                });

                                group.add(circle1);                                                          
                                layer.draw();    
                                circle1.on("dragmove",function()                         
                                        var pos = this.getPosition();
                                        var x = pos.x;
                                        var y = pos.y;
                                        var rectX = box.getX();
                                        var rectY = box.getY();
                                        var x1= x - rectX;
                                        var y1= y - rectY;                                                                  
                                        box.setSize(x1+50,y1+25); 

                                        var textX=simpleText.getX();
                                        var textY=simpleText.getY();
                                        var x2= x - textX;
                                        var y2= y - textY;      
                                        simpleText.setSize(x2,y2); 

                                        var circle1X=circle1.getX();
                                        var circle1Y=circle1.getY();
                                        var x3=x-circle1X;
                                        var y3=y-circle1Y;
                                        circle1.setSize(x3,y3); 
                                        layer.draw();    
                                    }); 

                                box.on('mouseover', function() {
                                document.body.style.cursor = 'pointer';  });

                                box.on('mouseout', function() {
                                document.body.style.cursor = 'default';  });

                                circle1.on('mouseover', function() {
                                document.body.style.cursor = 'se-resize'; });

                                circle1.on('mouseout', function() {
                                document.body.style.cursor = 'default';  });


                                  group.on('click', function(evt) {     
                                      var shape =circle1.getVisible();                                          
                                      if( shape==false)
                                             {                                  
                                              circle1.show();
                                              layer.draw();   
                                              $('html').on('keydown',function(e){     
                                                   if(e.keyCode === 46){                             
                                                        group.destroy();
                                                        layer.draw();                                                
                                                    } 
                                             });    
                                             }else{
                                                circle1.hide();
                                                layer.draw();
                                               }    
                                      circle1.setVisible(false);  
                               }); 

         var canvas = document.getElementById('canDemo');   
                                 var canvas = document.getElementById('canDemo');
                                  ctx = canvas.getContext('2d'),
                                  font = '14px sans-serif',
                                  hasInput = false;   

                                  box.on('dblclick', function() {       
                                     // canvas.onclick = function(e) {                   
                                          if (hasInput) return;
                                          addInput(e.clientX, e.clientY);             
                                        });    

                              function addInput(x, y) {                       
                                  var input = document.createElement('textarea');       
                                  input.id="comment_area";
                                  input.type = 'textarea';
                                  input.style.position = "absolute";    
                                  input.style.left = (x - 4) + 'px';
                                  input.style.top = (y - 4) + 'px';
                                  input.style.zIndex="3"; 
                                  input.onkeydown = handleEnter;                            
                                  document.body.appendChild(input);
                                  input.focus();                          
                                  hasInput = true;  } 

                              function handleEnter(e) {
                                  var keyCode = e.keyCode;
                                  if (keyCode === 27) {                                    

                                  simpleText.setText( $("#comment_area").val());    
                                  drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));    
                                      document.body.removeChild(this);
                                      hasInput = false;
                                  }   
                              }                         

                              $('#comment_area').keypress(function (e){
                                    if(e.keyCode === 13){
                                        e.preventDefault();
                                        this.value = this.value.substring(0, this.selectionStart)+"\n";
                                    }    
                                });

                              function drawText(txt, x, y) {
                                  ctx.textBaseline = 'top';
                                  ctx.textAlign = 'left';
                                  ctx.font = font;
                                  ctx.fillText(txt, x - 4, y - 4);
                                  layer.draw();}