如何在动力学js,画布5中调整矩形的大小

时间:2014-06-18 13:34:18

标签: javascript html5-canvas kineticjs

Rect是可拖动的,可调整大小,即使你可以在其上添加或设置文本。但是在小提琴文本区域中取得用户的输入没有出现但在我的工作区上它的工作正常但是如果你看到小提琴问题仍然存在,因为“ simpleText“如果你取消注释它,box会按照期望每次调整大小,但由于simpleText它只调整第一次,之后会破坏逻辑。

这是我的小提琴http://jsfiddle.net/abhish20/Y2m2z/56/

var stage = new Kinetic.Stage({
                                    container: 'container',
                                    width: 578,
                                    height: 500,
                                    x: 10,
                                    y:18
                                  });
                                var layer = new Kinetic.Layer();
                          stage.add(layer);

                    var group = new Kinetic.Group({         
                        draggable : true,                                    
                    });     
        var relativeX=0;
        var relativeY=0;

                var box = new Kinetic.Rect({                             
                    x : relativeX,
                    y : relativeY,
                    offset : [ 50, 25 ],
                    width : 100,
                    height : 50,
                    fill : 'yellow',
                    stroke : 'black',
                    strokeWidth : 1,    
                    name:"comment"                      
                });

                group.add(box); 
              layer.add(group);
        layer.draw();


        var simpleText = new Kinetic.Text({
                        x : relativeX,
                        y : relativeY,                       
                        text : '',
                        fontSize : 15,
                        fontFamily : 'Calibri',
                        width:box.getWidth(),
                        height:box.getHeight(),
                        padding: 4,
                        fill : 'black',
                        id:"textBox"

                });
                 group.add(simpleText);
                        layer.draw();

                var circle1 = new Kinetic.Circle({          
                    x: relativeX+50,
                    y:relativeY+25, 
                    x : 50,
                    y : 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);               
                          layer.draw();




                        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);

                 });                



                  group.on('dblclick', function() {                                                     
                          if (hasInput)  
                              return; 
                              addInput();   

                        }); 



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

                 function addInput() {                        
                  var input = document.createElement('textarea');   
                  var x=box.getX();
                  var y=box.getY();
                  input.id="comment_area";
                  input.type = 'textarea';
                  input.style.position = "absolute";    
                  input.style.left = x+220+ 'px';
                  input.style.top = y+171+ 'px';
                  input.style.height=300;
                  input.style.zIndex="3";                               
                  input.onblur= handleEnter;                    
                  document.body.appendChild(input);
                  input.focus();



                if(simpleText.getText().length!=0)
                    {
                     $("#comment_area").val(simpleText.getText());
                    }
                  hasInput = true;

              }


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

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

              }

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

              }



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

                });

我担心的是我将所有元素组合在一起表现得像单个组件,因此它会导致问题但我只想以组形式工作代码。

请建议

这是我的小提琴http://jsfiddle.net/abhish20/Y2m2z/56/

1 个答案:

答案 0 :(得分:0)

您的代码存在问题。

circle1.setSize(x3,y3);

如果x3或y3 = = 0,则圆圈消失。

注释掉那一行,然后代码就可以了。

您可以通过插入... console.log(x3,y3)或其他任何内容来测试代码以查找此类问题。