Kineticjs的线条图案

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

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

}）;

来源

2014-02-06 User

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

KineticJS不允许有图案的中风。

但是你可以使用一个Kinetic.Shape并抓住这样一个真实的HTML画布背景：

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

enter image description here

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

来源

2014-02-07 01:03:14 markE

这正是我一直在寻找。非常感谢你。我知道形状对象对Kinetic来说是比较新的，也许我应该更频繁地使用它。再次感谢。 – User

我可以补间吗？例如，我需要将它作为一条线，然后用该模式展开该线。 – User

是的。这个例子使用了固定点。你可以用相对点 - 你的直线triangle.x（），triangle.y（），triangle.strokeWidth（）等替换例子中的固定点。然后你可以补间这些节点值。 – markE

Kineticjs的线条图案

回答

相关问题