与Kineticjs的线条图案

Question

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

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

}）;

Answer 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();
  },
});