0

刚开始检查动力学 js。我有很多组，每个组都有 aKinetic.Text和 a Kinetic.Rect。

我可以通过这个提示轻松更改任何文本；

text.on('click', function(evt) {
          this.setText(prompt('New Text:'));
          layer.draw(); //redraw the layer containing the textfield
        });

但我想根据文本更改矩形（包含文本）的高度和宽度。所以，这是我尝试过的，但这不起作用。它向我显示了提示，但不会更改文本，并且在那之后我的组变得无法点击！；

 group.on('click', function(evt) {
              this.get('.textbox').setText(prompt('New Text:'));
              //this.get('.rectangle')....change rect's height/width here
              layer.draw(); //redraw the layer containing the textfield
            });

rectangle 和 textbox 是两个Kinteic.Text和Kinetic.Rect每个组中的名称。我究竟做错了什么？

4

1 回答 1

1

您可以使用 Kinetic 的 getTextWidth() 来查看文本的宽度。然后调整矩形。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/MZCCA/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <button id="fitText">Fit text in the rectangle</button>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>

        $("#fitText").click(function(){ redraw();})

        function redraw(){
            var textWidth=text.getTextWidth();
            // redraw the container--add 10px because the text has 5px padding
            container.setWidth(textWidth+10);
            layer.draw();
        }

        var stage = new Kinetic.Stage({
          container: 'container',
          width: 400,
          height: 200
        });
        var layer = new Kinetic.Layer();

        var container = new Kinetic.Rect({
          x: 100,
          y: 30,
          width: 75,
          height: 30,
          fill:"yellow",
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

        var text = new Kinetic.Text({
          x: 100,
          y: 30,
          text: 'Here is some text.',
          fontSize: 18,
          fontFamily: 'Calibri',
          fill: '#555',
          padding: 5,
          align: 'center'
        });

        layer.add(container);
        layer.add(text);
        stage.add(layer);

    </script>
  </body>
</html>
于 2013-04-01T18:43:47.590 回答