2

現在、次の例でKinetic JSをいじっています。

http://jsfiddle.net/r8rtJ/4/

var yoda = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    width: 106,
    height: 118,
    scale: 2
});
poly.setFill({
image: imageObj,
offset: {x: 0, y: 0}
});

そして、オブジェクトがロードされたら、画像の塗りつぶしの不透明度をフェードインする方法があるかどうか疑問に思っていますか? 現時点では、ポリゴンに即座に適用されるだけで、塗りつぶしの不透明度をオブジェクト自体とは別に設定する方法がわかりません。

乾杯！

4

2 に答える 2

3

setFillポリゴンオブジェクトがそれ自体を描画することになっているときに、それ自体を何で埋めるべきかを指示するだけです。これは、画像またはカラーにすることができます。

ポリゴンを描画する際の不透明度を設定するには、opacityプロパティがあります。達成しようとしていることは、タイムアウトと、ポリゴンの不透明度を上げて再描画する関数を組み合わせることで実現できます。

var fadeIn = function(shape) {
    var o = shape.getOpacity();
    o = o + 0.1 >=1 ? 1 : o + 0.1;
    shape.setOpacity(o);
    shape.getLayer().draw();
    if(o !== 1) {
        setTimeout(function() {
                fadeIn(shape);
            }, 120);
    }
};

例。

編集：

現在KinectJSで塗りつぶしの不透明度を設定する方法はないようです。ただし、回避策を見つけることができるかどうかを確認しようとしています。

これを行う1つの方法は、前述のように、ストロークと空の塗りつぶしだけで別のポリゴンを塗りつぶしで描画し、フェードインが終了したらストロークポリゴンを削除することです。

例。

drawFunc別の方法は、特定のポリゴンのを変更することです。

特定のレイヤーのdraw関数が呼び出され、drawSceneそのdrawHitすべての子に対して関数が呼び出されるときはいつでも。drawSceneおよびオブジェクトのdrawHitを呼び出すための関数。を呼び出す前に、シェイプの不透明度に基づいてを設定します。Kinetic.ShapedrawFuncdrawSceneglobalAlphadrawFunc

の設定方法drawFuncはKinetic.Polygon、最初に、ポリゴンの側面のコンテキストにパスが形成されることです。次に、それが塗りつぶされ、ストロークが続きます。塗りつぶしが行われる方法はfillStyle、ポリゴンの塗りつぶしに基づいてコンテキストのを設定するだけで、context.fill呼び出されます。

画像で塗りつぶしスタイルをどのように設定しますか？がsetFillポリゴンに対して呼び出され、引数として渡されたオブジェクトがプロパティを持つimage場合、fillTypeはと見なされます'PATTERN'。によって作成されたパスを塗りつぶすdrawFunc場合は、画像を使用してパターンを作成しcontext.createPattern、塗りつぶしスタイルとして設定します。不透明度は考慮されません。

drawFuncただし、で変更することにより、特定のポリゴンに塗りつぶしの不透明度を考慮させることができsetDrawFuncます。drawFuncKinectJSソースからコピーし、で渡された不透明度を考慮してパターンを異なる方法で塗りつぶす条件を追加しましたsetFill。

例。

ただし、これはmouseover何らかの理由でイベントを中断することに注意してください。私または他の誰かが、変更されたmouseoverときに何が機能しないのかを理解するまで、方法1に固執するのが最善drawFuncです。

編集2：

私はなんとかそれを理解することができました！

ポリゴンdrawHitFuncはそのと同じdrawFuncです。したがって、を変更すると、イベントの場合と同様に、ヒット検出が必要な場合に問題が発生するをdrawFunc変更することになります。drawHitFuncmouseover

したがって、ポリゴンのを変更するときに、元のポリゴンと同じになるようにwithdrawFuncも変更すると、ヒット検出が壊れることを回避できます。drawHitFuncsetDrawHitFunc drawFunc

例。

于 2013-01-03T10:25:51.010 に答える
1

はい、これを行う方法があります。transitionToメソッドを使用して、次のように形状の不透明度をフェードします。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

常に不透明なストロークを適用する場合は、画像で塗りつぶされたシェイプの上にストロークのみを配置して、別のシェイプを作成するだけです。

于 2013-01-09T03:41:44.087 に答える