1

我使用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/

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

4

1 回答 1

2

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()。

于 2013-03-03T18:08:37.060 回答