Question

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

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（）。

Kineticjs - 固定旋转的形状填充图案

1 个答案: