1. 홈
  2. 질의 응답
  3. 텍스트 개체를 서로 나란히 정렬 - KineticJS

텍스트 개체를 서로 나란히 정렬 - KineticJS

2013-05-14 4 views
0

텍스트 개체와 별도의 레이블 개체가 있습니다. 그릴 때 서로 나란히 정렬해야합니다. x와 y 좌표를 더하고 있지만 객체는 픽셀에 의해 떨어져 있고 같은 라인에 있지 않습니다. 여기 내 코드가있다. 텍스트 렌더링 방법에 대한 그림을 추가했습니다.텍스트 개체를 서로 나란히 정렬 - KineticJS

![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]

출처

2013-05-14 allthenutsandbolts

답변

1

는 [편집 :] 추가의

시뮬레이션 "텍스트 영역"

이것은 X를 설정하는 키 코드가 그들을 정렬하는 동안 운동 라벨와 텍스트를 추가하는 방법

/Y 레이블/텍스트

유효한 텍스트 폭을 얻으려면 개체를 만든 후에 계산해야합니다.

var newWidth=label.getWidth();

지금까지 텍스트에서 사용 된 가로줄 공간의 양을 추적하십시오.

이전에 선폭 + 새 텍스트 너비로 인해 텍스트가 최대 선 너비를 초과하면 새 줄을 시작하십시오.

새 줄을 시작하려면 줄의 "Y"위치를 증가 시키십시오.

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

마지막으로 새 텍스트의 X/Y 위치를 설정하십시오. 현재 텍스트 폭을 누적기에 더합니다. 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>

출처

2013-05-14 21:07:30 markE

+0

예 좋다 : 여기

// set X label.setX(accumLineWidth); accumLineWidth+=width; // set Y label.setY(verticalAlign-label.getHeight()/2); layer.add(label); layer.draw();

는 코드와 바이올린입니다. 나는 표시해야하는 텍스트 청크가 많습니다. 어떻게 효과 x와 y를 계산할 수 있습니까? 지금 당장 당신은 그것들을 정적으로 할당하고 있습니다. 그러나 나는 그들이 얻고있는 텍스트 덩어리에 기초하여 그들을 계산할 필요가 있습니다. – allthenutsandbolts

+0

이제 1 개의 레이블 객체와 1 개의 텍스트 객체가 정렬되었으므로 새 청크를 기존 텍스트 객체에 추가 할 수 없었습니다. myTextObject.setText (myTextObject.getText() + ""+ newText); – markE

+0

문제는 걱정할 텍스트 객체가 너무 많습니다. 주어진 시간에 10000 또는 10000 이상이있을 수 있습니다 – allthenutsandbolts

관련 문제

 관련 문제