KineticJS의 텍스트 경로 배경

KineticJS 텍스트 경로를 사용하고 있지만 전체 경로에 배경색이나 이미지를 채울 수 없습니다. 나에게 해결책을 제안 해주세요.KineticJS의 텍스트 경로 배경

2013-07-19 KBR1905

는 textpath에 배경 색상을 넣어 두꺼운 스트로크와 정규 경로를 추가하려면

enter image description here

// the regular path will be the “background color” 

var path = new Kinetic.Path({ 
    x: 100, 
    y: 50, 
    data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50', 
    stroke: 'green', 
    strokeWidth:25, 
    lineCap:"round" 
}); 
layer.add(path); 

// and then add the text on the same path 

var textpath = new Kinetic.TextPath({ 
    x: 100, 
    y: 50, 
    fill: "gold", 
    fontSize: '24', 
    fontFamily: 'Arial', 
    text: 'All the world\'s a stage, and all the men and women merely players.', 
    data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' 
}); 
layer.add(textpath);

다음 코드이고 바이올린 : http://jsfiddle.net/m1erickson/Sx4QA/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 
    <script defer="defer"> 

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

     var img=new Image(); 
     img.onload=function(){ 
      start(img); 
     } 
     img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/shakespeare.png"; 

     function start(img){ 

      var background=new Kinetic.Rect({ 
      x:0, 
      y:0, 
      width:stage.getWidth(), 
      height:stage.getHeight(), 
      fill:"skyblue" 
      }); 
      layer.add(background); 

      var image=new Kinetic.Image({ 
       image:img, 
       x:128, 
       y:25, 
       width:100, 
       height:100, 
      }); 
      layer.add(image); 

      var path = new Kinetic.Path({ 
      x: 100, 
      y: 50, 
      data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50', 
      stroke: 'green', 
      strokeWidth:25, 
      lineCap:"round" 
      }); 
      layer.add(path); 

      var textpath = new Kinetic.TextPath({ 
      x: 100, 
      y: 50, 
      fill: "gold", 
      fontSize: '24', 
      fontFamily: 'Arial', 
      text: 'All the world\'s a stage, and all the men and women merely players.', 
      data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' 
      }); 
      layer.add(textpath); 

      layer.draw(); 

     } 

    </script> 
    </body> 
</html>

출처

2013-07-19 18:42:17 markE

감사합니다 흠뻑. 그것은 나를 위해 일했다. – KBR1905

안녕하세요, 한 가지 더 문제가 있습니다. http://stackoverflow.com/questions/17855252/kinetic-js-image-property – KBR1905

각 문자에 대해 bakcground를 만드는 방법 –

KineticJS의 텍스트 경로 배경

답변

관련 문제