Javascript 如何调整动态js中矩形的大小，画布5

Rect是可拖动、可调整大小的，即使您可以在其上添加或设置文本。但在fiddle textarea中，从用户处获取输入不会出现，但在我的工作区中，其工作正常，但如果您看到在fiddle中仍然存在问题，因为simpleText，如果您取消注释它，框将根据预期每次调整大小，但由于simpleText，它只会第一次调整大小，之后会中断逻辑

这是我的小提琴

我关心的是，我将所有元素组合在一起，使其行为类似于单个组件，因此会导致问题，但我只希望工作代码以组的形式出现

请建议

---

这是我的小提琴

您的代码有问题

圆圈1.setSizex3，y3

如果x3或y3为===0，则圆消失

注释掉那一行，代码就工作了

---

您可以通过插入。。。控制台，logx3，y3或其他

请添加您的代码。将文本放在代码标签中不仅会使您的帖子无法阅读，而且在没有代码的情况下添加一个提琴也是一种悲哀的方式。您可以通过提琴和代码来查看：您知道如何将返回值带到函数之外吗？像var c myRect.onclick一样，函数{c=a+b}；加起来是：+c；这里考虑MyReCt是画布上绘制的矩形。这意味着我想在代码中获取返回值true或false，这样我就可以在函数之外编写条件，比如iftrue。我设置的代码与我在网上看到的代码略有不同。我不是一个真正的程序员。但是，是的，我已经知道怎么做了。我有一个存储变量的控制器函数，所有其他函数都可以访问这些变量。有不止一种方法可以做到这一点。例如。。。请访问www.pixycakes.com/cakedesigner或搜索three.js编辑器-在cakedesigner中，pixy是主函数，存储所有其他人都可以访问的变量。例如，这个.uiScale。任何东西都可以通过调用pixy.uiScale访问该变量，并且可以访问该变量。希望这是有意义的…或者。因为Pixy调用了烤箱，所以任何东西都可以访问烤箱变量。例如，我可以在我的系统中的任何地方调用pixy.oven.getCakeData，这看起来像是完全自包含的函数。实际上，我只是在学习javascript和“范围”，你可以在网上找到很多关于变量范围的文章。我知道的很少。

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";
                    }

                });