Text 如何在kinetic.js文本对象中对齐文本？_Text_Kineticjs_Justify

Text 如何在kinetic.js文本对象中对齐文本？

text

Text 如何在kinetic.js文本对象中对齐文本？,text,kineticjs,justify,Text,Kineticjs,Justify,动态文本对象具有左、右、中（）对齐的可能。有什么方法可以实现文本对齐吗？KineticJS基于html画布元素，画布不提供文本对齐您可以使用canvas的context.measureText构建自己的文本对齐例程，以测量每个单词的宽度并以对齐模式填充每行文本示例代码和演示：原型正文{padding:20px；} #容器{ 边框：实心1px#ccc；边缘顶部：10px；宽度：350px；高度：350px； } $（函数（）{ 函数调整器（文本、字体、线宽、线宽）{ // 这个.

动态文本对象具有左、右、中（）对齐的可能。有什么方法可以实现文本对齐吗？

KineticJS基于html画布元素，画布不提供文本对齐

您可以使用canvas的

context.measureText

构建自己的文本对齐例程，以测量每个单词的宽度并以对齐模式填充每行文本

示例代码和演示：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
函数调整器（文本、字体、线宽、线宽）{
//
这个.font=font；
this.lorem=文本；
此参数为.maxLineWidth=线宽；
此参数。线宽=线宽；
//
this.canvas=document.createElement（“canvas”）；
this.ctx=this.canvas.getContext（“2d”）；
this.aLorem=this.lorem.split（“”）；
这个.aWidths=[]；
这是空间宽度；
//这个。run（）；
}
Justifier.prototype.run=function（）{
这个.ctx.save（）；
this.ctx.font=this.font；
spaceWidth=this.ctx.measureText（“”）.width；
对于（var i=0；我非常感谢你，这正是我要找的。
<!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>