Javascript 丁字裤

我有一个在Kineticjs中创建的自定义形状，我需要形状像一条线一样在二者之间。我该怎么做呢？我试着创造一个动态的吐温，但这似乎并不正确

var grnStripe = new Image();
grnStripe.onload = start;
grnStripe.src = 'images/GreenStripe-01.png';
function start(){
grnLine = new Kinetic.Shape({
    sceneFunc: function (context) {
        var ctx = this.getContext()._context;
        var pattern = context.createPattern(grnStripe, 'repeat');
        ctx.beginPath();
        ctx.moveTo(379.5, 270);
        ctx.lineTo(379.5, 270);
        ctx.strokeStyle = pattern;
        ctx.lineWidth = 2.5;
        ctx.stroke();
    }
});
line_layer.add(grnLine);
line_layer.draw();
}

我想把形状（线）改成310的高度。再一次，我试着创造一个动态的吐温，但它似乎不起作用

是的，你可以在dynamic.Shape之间——甚至是带有图案笔划的形状

[关于在一个动能形状上吐温的一般回答]

tweening动能.Shape的关键是使用动能.Shape属性进行

sceneFunc

更改

例如，此sceneFunc将基于动能.Shape的x&y属性绘制一个矩形

sceneFunc: function(context) {
  var x=this.x();
  var y=this.y();
  context.fillRect(x,y,20,20);
},

然后，您可以使用Kinetic.Tween来更改Kinetic.Shapes的x/y，这反过来将为矩形设置动画

例如，此tween将为名为myShape的动能.Shape设置动画，从其当前的x/y到和x/y为[100100]

tween = new Kinetic.Tween({
    node: myShape, 
    duration: 1,
    x: 100,
    y: 100,
  });

[基于您之前关于图案笔画线的一个问题的具体答案]

“动能.Shape”上下文不允许您绘制图案笔划线

作为一种解决方法，您可以获取实际的html上下文，该上下文允许模式笔划线

吐温时的“重影问题”：

但是，当您想要在填充图案的线条之间穿插时，您会遇到“重影”问题，因为Dynamic实际上为每一层使用2个画布，并且您的填充图案线条在第二个命中画布上的位置不正确（“重影”）。这是意料之中的，因为我们不能期望Dynamic知道您在实际html上下文中绘制了什么

通过在自定义的Kinetic.Shape中定义hitFunc，可以解决此重影问题。这使得Kinetic能够在第二次点击画布上正确定位填充图案的线条。幽灵消失了

下面是一把小提琴，演示了填充图案线条的解决方法：

---

你能提供你想要的图像吗？我不能提供我正在使用的实际图像。我会给你占位符图像，就像你为我回答的最后一个问题一样<代码>'http://www.html5canvastutorials.com/demos/assets/yoda.jpg“我的问题是在mspaint中创建一个模拟，你想要什么？好的，我添加了一个示例，我仍然不清楚