Question

我有单独的文本对象和标签对象。在绘制时，它们需要彼此相邻。我正在添加x和y坐标，但是对象被一些像素关闭并且不在同一条线上。这是我的代码。我已经添加了文本呈现方式的图片。

![var extractedSubString  = text.substring(currentTextOffset,value.begin-1)
            console.log(extractedSubString)
            currentTextOffset += value.end

             var complexText = new Kinetic.Text({
                x:x,
                y:y,
                width:3000,
                text: extractedSubString,
                fontSize: 14,
                fontFamily: 'Helvetica',
                fill: '#555',
                align: 'left'
            });

            x += complexText.getTextWidth()
            y += complexText.getHeight()

            group.add(complexText)
            var simpleLabel = new Kinetic.Label({
                opacity: 0.75,
                x:x,
                y:y,
                text: {
                    text: value.data,
                    fontFamily: 'Helvetica',
                    fontSize: 14,
                    padding: 5,
                    fill: '#555'
                },
                rect: {
                    fill: labelColor
                }
            });

            group.add(simpleLabel)
            x +=simpleLabel.getWidth()
            y +=simpleLabel.getHeight()][1]

Answer 1

[编辑：]

如何在模拟“textarea”中对齐动态标签和文本

这是设置其他标签/文本的X / Y的关键代码。

要获得有效文字宽度，必须在创建对象后计算。

var newWidth=label.getWidth();

跟踪到目前为止文本使用的水平线条空间量。

如果之前的行宽+新文本宽度将导致文本溢出最大行宽，则开始一个新行。

要开始一个新行，请增加该行的“Y”位置。

if( accumLineWidth + newWidth > maxLineWidth ){
    verticalAlign+=lineHeight;
    accumLineWidth=leftMargin;
}

最后，设置新文本的X / Y位置。并将当前文本宽度添加到累加器。

// set X
label.setX(accumLineWidth);
accumLineWidth+=width;

// set Y
label.setY(verticalAlign-label.getHeight()/2);
layer.add(label);
layer.draw();

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

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
    body{ background-color: ivory; }
    #container{border:1px solid red; width:350px;}
</style>

<script>
$(function(){

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

      var leftMargin=20;
      var maxLineWidth=300;
      var lineHeight=25;

      // new labels/texts will begin at accumLineWidth
      var accumLineWidth=leftMargin;

      // new labels/texts will align themselves to verticalAlign
      var verticalAlign=25;

      function appendLabel(labelText){

          var label = new Kinetic.Label({
            text: {
              text: labelText,
              fontFamily: 'Verdana',
              fontSize: 18,
              padding: 5,
              fill: 'white'
            },
            rect: {
              fill: 'blue'
            }
          });

          // need to calc width/height AFTER creation
          // set width and check for newline
          var width=label.getWidth();
          if(accumLineWidth+width>maxLineWidth){
              verticalAlign+=lineHeight;
              accumLineWidth=leftMargin;
          }
          // set X
          label.setX(accumLineWidth);
          accumLineWidth+=width;
          // set Y
          label.setY(verticalAlign-label.getHeight()/2);
          layer.add(label);
          layer.draw();
      }


      function appendText(newText){

          var text = new Kinetic.Text({
            text: newText,
            fontSize: 18,
            fontFamily: 'Verdana',
            fill: 'blue'
          });

          // need to calc width/height AFTER creation
          // set width and check for newline
          var width=text.getWidth();
          if(accumLineWidth+width>maxLineWidth){
              verticalAlign+=lineHeight;
              accumLineWidth=leftMargin;
          }
          // set X
          text.setX(accumLineWidth);
          accumLineWidth+=width;
          // set Y
          text.setY(verticalAlign-text.getHeight()/2);
          layer.add(text);
          layer.draw();
      }


      // testing

      var counter=0;

      $("#label").click(function(){ appendLabel("Label"+counter++); });
      $("#text").click(function(){ appendText(" text"+counter++); });

}); // end $(function(){});
</script>

</head>

<body>
    <div id="container"></div>
    <button id="label">Add label</button>
    <button id="text">Add text</button>
</body>
</html>

将文本对象彼此对齐 - KineticJS

1 个答案: