1. 首頁
  2. 問答
  3. 自定義編輯器使用kineticjs文本下劃線

自定義編輯器使用kineticjs文本下劃線

2014-02-28 65 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畫布來繪製風格化文本要容易得多。

來源

2014-02-28 18:05:23 markE

相關問題

 相關問題