Kineticjs 的线条图案答案

【问题标题】：Line patterns with KineticjsKineticjs 的线条图案
【发布时间】：2014-02-06 21:36:33
【问题描述】：

好的，所以我正在尝试绘制一条线，它以带图案的图像而不是纯色作为笔触。我知道可以用图案填充 Rect 或其他形状，但这不是我想要做的，我正在严格使用线条。所以我的问题是。是否可以将图像传递给图案并将该图案用作线条的笔触？还是我应该只创建一个 Rect 并用我的模式填充每个？

var line = new Kinetic.Line({
points: [0, 0, 0, 500],
stroke: /Here's where I want the pattern to go\,
strokeWidth: strokeWidth

});

【问题讨论】：

标签： javascript animation canvas kineticjs

【解决方案1】：

Html Canvas 允许使用图案来绘制笔触。

KineticJS 不允许有图案的笔划。

但是您可以使用 Kinetic.Shape 并像这样获取真实的 html 画布上下文：

演示：http://jsfiddle.net/m1erickson/hTP5J/

var triangle = new Kinetic.Shape({
  sceneFunc: function(context) {
    var ctx=this.getContext()._context;
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(100, 50);
    ctx.lineTo(320, 80);
    ctx.quadraticCurveTo(200, 100, 160, 170);
    ctx.closePath();
    var pattern=context.createPattern(img, 'repeat');
    ctx.strokeStyle=pattern;
    ctx.lineWidth=20;
    ctx.stroke();
    ctx.restore();
  },
});

【讨论】：

这正是我想要的。非常感谢你。我知道 shape 对象对 Kinetic 来说相对较新，也许我应该开始更频繁地使用它。再次感谢。
我可以补间吗？例如，我需要将其作为一条线，然后用图案展开这条线。
是的。此示例使用固定点。您可以将示例中的固定点替换为相对点——您的线条 triangle.x()、triangle.y()、triangle.strokeWidth() 等。然后你可以补间这些节点值。
那么类似于：ctx.moveTo(100, 50); triangle.x(100); triangle.y(250); ？我对 Canvas 不是很熟悉，最近才开始使用它。