2014-02-28 152 views

回答

1

没有为下划线没有内置的选项。

KineticJS建立在html5画布上,画布上没有下划线的文字装饰。

唯一的解决方法是手动绘制文本

  • 创建组
  • 添加Kinetic.Text到组
  • 添加Kinetic.Line到其用于强调所述组下一个线文本
  • 测量文本
  • 的宽度使线的宽度为测量
  • 使林的baselineY根据需要

e是示例代码和演示:http://jsfiddle.net/m1erickson/r2ZsK/

<!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-v4.7.2.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

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

    var utilCanvas=document.createElement("canvas"); 
    var utilCtx=utilCanvas.getContext("2d"); 

    createUnderlinedText("sample text",20,50,18,"verdana",19); 

    function createUnderlinedText(text,x,y,fontsize,fontfamily,baselineY){ 

     if(!baselineY){ baselineY=fontsize+1; } 

     utilCtx.font=fontsize+" "+fontfamily; 
     var textWidth=utilCtx.measureText(text).width; 

     var ulText=new Kinetic.Group({ 
      x:x, 
      y:y, 
      draggable:true, 
     }); 
     layer.add(ulText); 

     var text = new Kinetic.Text({ 
      x:0, 
      y:0, 
      text:"sample text", 
      fontSize:fontsize, 
      fontFamily:fontfamily, 
      fill: 'black', 
     }); 
     ulText.add(text); 

     var ul=new Kinetic.Line({ 
      points:[0,baselineY,textWidth,baselineY], 
      strokeWidth:1, 
      stroke:"black" 
     }); 
     ulText.add(ul); 

     layer.draw(); 

    } 

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

</script>  
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html> 

说了这一切,并恕我直言...如果你需要一个文本编辑器,有很多功能齐全的编辑器在那里。选择其中之一比刺激HTML画布来绘制风格化文本要容易得多。