KineticJS - 创建具有渐变笔划的样条线答案

【问题标题】：KineticJS - Creating a Spline with a Gradient StrokeKineticJS - 创建具有渐变笔划的样条线
【发布时间】：2013-12-29 22:19:56
【问题描述】：

我正在尝试使用渐变而不是纯色来描边我的 Kinetic Spline 对象。但是，我的样条曲线变黑了。有什么想法吗？

这是我的代码：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
var layer = new Kinetic.Layer(); 
var blueSpline = new Kinetic.Spline({
    points: [{
      x: 73,
      y: 160
    }, {
      x: 340,
      y: 23
    }, {
      x: 500,
      y: 109
    }, {
      x: 300,
      y: 109
    }],
    strokeWidth: 10,
    lineCap: 'round',
    tension: 1,
    fillLinearGradientStartPoint: [73, 160],
    fillLinearGradientEndPoint: [300, 109],
    fillLinearGradientColorStops: ['#ff0000', '#00ff00'],
    fillPriority: 'linear-gradient'
  });

  layer.add(blueSpline);
  stage.add(layer);

【问题讨论】：

标签： javascript kineticjs spline

【解决方案1】：

你可以试试这个：

var ctx = layer.getContext();
var grad = ctx.createLinearGradient(73, 160, 300, 109);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(1, '#00ff00');

var blueSpline = new Kinetic.Spline({
...
stroke: grad,
...
});

这是一个例子： http://jsfiddle.net/qK6nq/

【讨论】：

【解决方案2】：

KineticJS 不支持渐变笔触——仅支持渐变填充。

【讨论】：