Question

我正在使用KineticJS文本路径，但我无法将背景颜色或图像填充到整个路径。请给我一个解决方案。

Answer 1

要在文字路径上添加背景颜色，请添加粗笔划的常规路径

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>

在KineticJS中的Textpath背景

1 个答案: