kinetic.js 텍스트 객체에서 텍스트를 정렬하는 방법은 무엇입니까?

키네틱 텍스트 개체가 왼쪽, 오른쪽, 가운데 (http://kineticjs.com/docs/Kinetic.Text.html) 정렬이 가능합니다. 정당화 된 텍스트를 얻을 수있는 방법이 있습니까?kinetic.js 텍스트 객체에서 텍스트를 정렬하는 방법은 무엇입니까?

출처

2014-07-11 Jiro Matchonson

KineticJS는 html 캔버스 요소를 기반으로하며 캔버스는 텍스트 양쪽 맞춤을 제공하지 않습니다.

캔버스의 context.measureText을 사용하여 텍스트 맞춤 루틴을 구성하여 각 단어의 너비를 측정하고 각 줄을 양쪽 맞춤 된 패턴으로 채울 수 있습니다.

enter image description here

예제 코드와 데모 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    function Justifier(text,font,linewidth,lineheight){ 
     // 
     this.font=font; 
     this.lorem=text; 
     this.maxLineWidth=linewidth; 
     this.lineHeight=lineheight; 
     // 
     this.canvas=document.createElement("canvas"); 
     this.ctx=this.canvas.getContext("2d"); 
     this.aLorem=this.lorem.split(" "); 
     this.aWidths=[]; 
     this.spaceWidth; 

     //this.run(); 
    } 
    Justifier.prototype.run=function(){ 
     this.ctx.save(); 
     this.ctx.font=this.font; 
     spaceWidth=this.ctx.measureText(" ").width; 
     for(var i=0;i<this.aLorem.length;i++){ 
      this.aWidths.push(this.ctx.measureText(this.aLorem[i]).width); 
     } 
     this.ctx.restore(); 
     // 
     var justifiedLines=[]; 
     var startingIndex=0; 
     do{ 
      var line=this.justifyLine(startingIndex); 
      justifiedLines.push(line); 
      startingIndex=line.endingIndex+1; 
     }while(startingIndex<this.aLorem.length-1); 
     // 
     this.canvas.width=this.maxLineWidth; 
     this.canvas.height=justifiedLines.length*this.lineHeight+5; 
     this.ctx.font=this.font; 
     for(var i=0;i<justifiedLines.length;i++){ 
      this.drawJustifiedLine(justifiedLines[i],i*this.lineHeight+this.lineHeight); 
     } 
    } 
    Justifier.prototype.justifyLine=function(startingIndex){ 
     var accumWidth=0; 
     var accumWordWidth=0; 
     var padding=0; 
     var justifiedPadding; 
     var index=startingIndex; 
     while(index<this.aLorem.length && accumWidth+padding+this.aWidths[index]<=this.maxLineWidth){ 
      accumWidth+=padding+this.aWidths[index]; 
      accumWordWidth+=this.aWidths[index]; 
      padding=spaceWidth; 
      index++; 
     }; 
     if(index<this.aWidths.length-1){ 
      index--; 
      justifiedPadding=(this.maxLineWidth-accumWordWidth)/(index-startingIndex); 
     }else{ 
      justifiedPadding=(this.maxLineWidth-accumWordWidth)/(index-startingIndex-1); 
     } 
     return({ 
      startingIndex:startingIndex, 
      endingIndex:index, 
      justifiedPadding:justifiedPadding} 
     ); 
    } 
    Justifier.prototype.drawJustifiedLine=function(jLine,y){ 
     var sp=jLine.justifiedPadding; 
     var accumLeft=0; 
     for(var i=jLine.startingIndex;i<=jLine.endingIndex;i++){ 
      this.ctx.fillText(this.aLorem[i],accumLeft,y); 
      accumLeft+=this.aWidths[i]+sp; 
     } 
    } 


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

    var font="14px verdana"; 
    var text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."; 
    var J=new Justifier(text,font,250,18); 
    J.run(); 

    var textImage=new Kinetic.Image({ 
     x:20, 
     y:20, 
     image:J.canvas, 
     draggable:true, 
    }); 
    layer.add(textImage); 
    layer.draw(); 

}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <h4>KineticJS Justified Text</h4> 
    <div id="container"></div> 
</body> 
</html>

출처

2014-07-11 15:01:02 markE

http://jsfiddle.net/m1erickson/c7dwC/ 당신에게 정확히 내가 찾던 많이 먹으 렴 감사합니다. –

kinetic.js 텍스트 객체에서 텍스트를 정렬하는 방법은 무엇입니까?

답변

관련 문제