1. 홈
  2. 질의 응답
  3. kineticjs 텍스트 밑줄을 사용하는 사용자 정의 편집기

kineticjs 텍스트 밑줄을 사용하는 사용자 정의 편집기

2014-02-28 3 views

답변

1

밑줄에 대한 기본 옵션이 없습니다.

KineticJS는 html5 캔버스에 작성되었으며 캔버스에는 밑줄 표시를위한 텍스트 장식이 없습니다.

유일한 해결 수동 텍스트

  • 밑줄에 사용되는 그룹 Kinetic.Line 추가
  • 그룹에 Kinetic.Text 추가 그룹을 생성하에 선을 그릴 수있다 텍스트
  • 는 LIN의 baselineY 측정
  • 으로 선의 폭을 이루는 텍스트
  • 의 폭을 측정 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

관련 문제

 관련 문제