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 に答える