2

KineticJSフレームワークによって作成されたHTML5キャンバス要素のサイズを変更しようとしています。つまり、キャンバス内のオブジェクトではなく、要素のサイズを変更しようとしています。

この問題ではjQuery.animate関数を使用できないため（CSSを変更し、要素の実際の属性を変更したい）、KineticJSAPIによって提供される内部関数を使用する独自の関数を開発する必要がありました。stage.setSize(width, height)アニメーション関数を書いた経験がまったくないので、まったく間違った状況に近づいているのかもしれません。

問題：パフォーマンスに依存するため、多くの場合、十分な速度ではありません（setIntervalのおかげで）。言うまでもなく、モバイルデバイス（iPhone 4S iOS 5.0.1テスト済み）では部分的にしか機能しません。どのソリューションも、モバイルデバイスでも、ほぼ完璧に機能する必要があります。

この機能を改善するためのさまざまな方法を探しています。シュート。

（取得しなかった場合は、私のコードへのリンクを参照してください。http：//jsfiddle.net/G4nuH/animateResizeが関連する関数です。）

4

3 に答える 3

1

最終的なアプリケーションの詳細を知らなくても、可能であれば、キャンバスサイズのアニメーションは避けることをお勧めします。ご存知かもしれませんが、canvas要素のサイズを変更すると、そこに保存されているすべてのものが完全に消去されます。つまり、寸法をアニメーション化するには、各反復でキャンバス全体を再描画するときに、幅や高さを段階的に調整する必要があります。デスクトップの場合、これはおそらく大きな問題ではありません。ただし、モバイルデバイスは苦労します。

代わりに、コンテナ要素のサイズを大きくしてアニメーションを偽造することをお勧めします（アニメーションがはっきり見えるように、境界線や背景色などを使用します）。次に、アニメーションが完了したら、現在のキャンバスデータを一時オブジェクトに保存し、キャンバスのサイズを大きくして、古いコンテンツをスタンプし直します。

widthキャンバスのサイズをアニメーション化して、より大きな理論上のキャンバスにすでに存在するコンテンツを表示する場合（つまり、ユーザーがキャンバス全体をトリミングする小さなウィンドウを持っている場合）、CSSとプロパティを試してみることをお勧めしますheight。overflow: hidden;。このアプローチでは、すべての描画操作中にキャンバス全体を編集しますが、ビューポートのサイズをアニメーション化するのは簡単でスムーズです。

于 2012-01-29T18:58:22.680 に答える
0

キャンバスはグラフィックスのビューポートであり、ドキュメント全体のサイズにすることができます。このcontext.clip()関数を使用して、HTMLボックスモデルの更新が必要なキャンバスのサイズを変更する代わりに、表示する領域を定義できます。（パフォーマンスの問題です！）

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();
于 2012-02-04T20:46:06.840 に答える
0

いくつかの調査の後、私は自分自身のハッキーな解決策を見つけました。を使用した例jQuery.animate。KineticJSにはいくつかの背景レイヤーがあるため、それらすべてをアニメーション化する必要がありました。

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }
于 2012-02-13T21:04:09.177 に答える