javascript - Kineticjs - 修复了旋转形状的填充图案

Question

我使用 kineticjs处理形状和过渡。现在我已经制作了下一个代码示例:

http://jsfiddle.net/z6LaH/2/

hexagon = new Kinetic.RegularPolygon({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    sides: 6,
    radius: hexRadius,
    cornerRadius: 0,
    fillPatternImage: img,
    fillPatternOffset: [150, -150],
    //fill: 'white',
    stroke: 'black',
    strokeWidth: 0
});

hexagon.on('mouseover touchstart', function() {
    this.transitionTo({
        cornerRadius: transRadius,
        rotation: Math.PI / 2,
        scale: {x: 0.75, y: 0.75},
        easing: 'ease-in',
        duration: duration,

        callback: function() {
            hexagon.transitionTo({
                scale: {x: 1.1, y: 1.1},
                duration: duration * 7,
                easing: 'elastic-ease-out'
            });
        }
    });
});

如您所见，填充图案随形状旋转。我需要它来修复。所以我的问题是:

是否可以制作固定的填充图案，而形状是旋转的，如何？

---

更新:

我得到了下一个方法:沿相反方向旋转填充图案。

http://jsfiddle.net/z6LaH/3/

有没有更优雅的方法来做同样的事情？

Answer 1

Eric 刚刚添加了将用户定义的裁剪功能保存到层和组的功能。

首先，您定义一个在层或组上绘制裁剪区域的函数

var layer = new Kinetic.Layer({
    clipFunc: function(canvas) {
        var context = canvas.getContext();
        context.rect(0, 0, 400, 100);
    } 
});

然后调用 .clip() 函数来应用剪辑。这是源代码中 Kinetic 的 clip() 函数:

_clip: function(container) {
   var context = this.getContext(); 
   context.save();
   this._applyAncestorTransforms(container);
   context.beginPath(); 
   container.getClipFunc()(this);
   context.clip();
   context.setTransform(1, 0, 0, 1, 0, 0);
}

clip() 函数在执行剪辑之前应用现有的转换。如果您不喜欢 Kinetic 函数的变换部分，您始终可以使用“container.getClipFunc()”，然后基于上面的 _clip 函数构建您自己的 myClipWithoutTransform()。