高度なsnap.svg

以前の投稿では、snap.svgを始める方法を見てきました。この投稿では、最初の記事に記載されている新しい機能を詳しく見ていきます。

キーテイクアウト

Advanced Snap.svgは、複雑なマスク、勾配、パターンの作成を可能にし、ユニークでダイナミックなグラフィックスを作成できます。
• snap.svgは、独立して同期する両方の要素をアニメーション化するさまざまな方法を備えた包括的なアニメーション機能を提供します。
snap.svgでのイベント処理により、クリック、ダブルクリック、マウスの動き、タッチイベントを処理する方法を使用して、ユーザーインタラクションを可能にします。
• snap.svgは、既存のSVGコードの再利用をサポートしており、SVGコードを文字列として注入したり、既存のファイルを読んだりします。 Snap.svgのDocumentFragmentsを使用してDOMを操作すると、
パフォーマンスが向上し、大規模なSVG図面の大幅なパフォーマンスの節約につながります。
マスキング
描画表面、シンプルな形状を作成する方法を思い出して、画像をロードすることから始めましょう。
円は今のところ画像の中心を覆っています。

ただし、長方形の画像しか持てないのは残念です。たぶん、あなたのデザイナーは素敵な円形のボタンや画像を作成しました。もちろん、いくつかの解決策がありますが、それらはすべて別の問題を残しています。ベストケースのシナリオ、デザイナーはページの背景と一致する外側の画像を提供できます。ただし、背景がしっかりしていると仮定すると、色を変更する必要がある場合は、画像を編集する必要があります。透明性を使用できますが、PNGなどの重い形式を必要とするか、GIFを使用してゆるい品質が必要です。数年で、おそらく、WebPはすべてのブラウザによって完全にサポートされ、それが難問を終わらせるでしょう。いずれにせよ、画像に対話性が必要な場合は、Mouseenter、Mouseout、Clickなどのイベントに応答する長方形の形状に固執します。

過去にフラッシュを長い間扱っていたので、SVGで最もイライラするものの1つは、SVG 1.1に導入されたマスクを使用できないことでした。スナップでは、画像を含むあらゆる要素にマスクを適用するのは非常に簡単です。

基本的に、マスクプロパティを要素に割り当てるだけです。実際のマスクとして使用する要素に注意する必要があります。最終要素の不透明度はマスク要素の白のレベルに比例するため、画像に完全な不透明度が必要な場合は、白の円を埋める必要があります。最初は迷惑に思えるかもしれませんが、次のセクションで見られるように、驚くべき効果の可能性が多くなります。

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

複雑なマスクを作成するために、明らかに異なる形状を組み合わせて構成できます。 SNAPは、あなたを助けるためにいくつかの構文砂糖を提供します：

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Paper.Mask（）メソッドはPaper.g（）に相当し、実際にはシームレスに置き換えることができます。

クリッピング

クリッピングパスは、塗料を適用できる領域を制限するため、現在アクティブなクリッピングパスに囲まれた領域の外側の図面の部分は描画されません。クリッピングパスは、目に見える領域（クリッピングパス内）を持つマスクと考えることができます。アルファ値は1で、隠し領域のアルファ値は0です。1つの違いは、マスクによって隠された領域がイベントに応答するのに対し、 、切り取られた領域はありません。

スナップにはクリッピング用のショートカットがありませんが、attr（）メソッドを使用して、任意の要素のクリップ、クリップパス、クリップルートプロパティを設定できます。

勾配

SVG 1.1を使用すると、勾配を使用して形状を埋めることができます。もちろん、これらの形状を使用してマスクを埋める場合、マスクの詰め物を変更して最終図面のアルファレベルを指定し、驚くべき効果を作成する可能性を活用できます。 SNAPは、勾配を作成するショートカットを提供します。これは、後で他の要素の充填プロパティに割り当てることができます。以前のコードをほんの少し変更した場合、たとえば：

このコードをテストする場合、最終的な効果は正確に期待したものではありません。これは、上記の小文字の「R」で表される相対的な放射勾配タイプを使用したからです。相対勾配は、グループの各要素に対して個別に作成されます（複合マスクとして）。グループ全体に単一の勾配を持つことを好む場合は、コマンドの絶対バージョンを使用できます。 'r（）＃fff-＃000'は、中心で白い塗りつぶしから始まり、境界で黒に分解される絶対的な放射勾配です。

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

要素の充填プロパティのSVG勾配を指定することで同じ結果を得ることができます。

この最後の例では、より複雑な勾配を示しました。異なるタイプ（絶対線形）に加えて、この勾配は（0、0）から（300、300）、黒から赤から25％になります。

gradient（）メソッドは文字列を受け入れます。詳細については、SNAPのドキュメントで説明しています

ページ内の任意のSVG要素から既存の勾配を使用することもできます。

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

パターン

パターンにより、別のSVG形状、勾配、または画像の発生を繰り返すことで形状を埋めることができます。 SNAPは、任意のスナップ要素からパターンを作成するelement.topattern（）メソッド（formely、pattern（）、debrecated）を提供します。

パターンを作成して要素を埋めることは非常に簡単です：

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

代わりに、グラデーションとパターンを組み合わせたい場合、それは別のストーリーであり、少し複雑なストーリーです！ 例として、上記の勾配とパターンを組み合わせたマスクを作成する方法を見てみましょう。

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

基本的に2レベルのマップを作成する必要があります。勾配で埋める画像で使用される最終マップには、勾配で満たされたマップ自体があります。結果は非常に印象的です！これはまた、あなたが想像するものを行うclone（）メソッドを紹介する良い機会でもありました。それが呼ばれる要素の深いコピーを作成します。

アニメーション

アニメーションは、snap.svgの最も作成された機能の1つです。アニメーションを処理する方法はいくつかあり、動作はわずかに異なります。

element.animate（）

最もシンプルなアニメーションメソッドであるelement.anime（）から始めます。この方法により、ユーザーはすべての要素のプロパティをすべて同期させることができます。プロパティの初期値は、もちろん現在の値であり、最終的な値はAnimate（）の最初の引数で指定されています。変更するプロパティに加えて、アニメーションの期間、その使いやすさ、アニメーションが完了すると呼び出されるコールバックを渡すことができます。

例では、すべてが明確になります：

これは、マスク内の大きな円を2秒間にわたってより小さな半径に縮小するだけです。

set.animate（）

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

グループ内（セット）の要素を個別にアニメーション化できます。しかし、セット全体を同期してアニメーション化したい場合はどうでしょうか？簡単！ set.anime（）を使用できます。これにより、セット内のすべての要素に同じ変換が適用され、さまざまなアニメーション間の同期性が確保され、すべての変更を一緒に収集することでパフォーマンスを向上させます。

セットの各要素を個別にアニメーション化することもできますが、同期することもできます。 set.animate（）は、さまざまな数の引数を受け入れます。これにより、アニメーションする必要がある各サブ要素の引数で配列を渡すことができます。

これまでのサンプルコード（CodePenで試してみてください）を正しくフォローしていると仮定すると、ブラウザのコンソールで上記のコードを実行すると、3つの要素が同期してアニメーション化される方法がわかります。上記のコードは、セット（Select（）およびSelectAll（）メソッドの結果として）を導入するチャンスであり、それらに定義されたいくつかの有用なメソッドとして。

セットを作成する別の方法は、要素の配列をスナップコンストラクターメソッドに渡すことです。

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

snap.animate（）

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

任意の数値プロパティをアニメーション化できますが、Animate（）は他のタイプでは機能しません。たとえば、テキスト属性をアニメーション化しようとすると、テキスト要素が台無しになります。しかし、そのような効果を得る別の方法、つまり、snap。

スナップオブジェクトのアニメートメソッドを呼び出すことにより、アニメーションの各ステップで実行されるアクションを詳細に指定することができます。これにより、複雑なアニメーションをグループ化して同期して実行するのに役立ちます（ただし、set.animate（）メソッドはこの問題に対処する正しい方法です）。 たとえば、

テキスト要素を作成してアニメーション化しましょう

イベント処理

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

マスクと画像の最初の比較に戻ると、前のセクションでアニメーションGIF（一種）で示したのと同じ効果を得ることができます。ただし、ユーザーの相互作用に応じてこの動作を再現したい場合、SVGを使用した改善はさらに関連しています。複数のGIFを使用して機能させる方法を見つけることができますが、柔軟性を失うことに加えて、同じ品質を少しも努力しても、

クリックハンドラーは、後でelement.unclick（）メソッドを使用して削除できます。 同様に処理できる他のイベントの中でも、DBLClick、Mousedown and Mouseup、Mousemove、Mouseout、Mouseover、およびTouchstartやTouchendなどのモバイル指向のイベントが多数あります。

jqueryまたはd3インターフェイスに使用されていた読者の場合、他のイベントを手動で処理するためにon（）メソッドがありません。 SNAPで提供されるハンドラーを超えたカスタム動作が必要な場合は、関連するDOM要素への参照を含む要素のノードプロパティを取得できます。そしてそれへのプロパティは直接：

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

ドラッグアンドドロップ

SNAPは、要素、drag（）メソッドを使用して、任意の要素、グループ、またはセットのドラッグアンドドロップを特に簡単にアクティブにします。カスタム動作が必要ない場合は、議論なしでそれを呼び出すことができます：

ただし、特別な動作が必要な場合は、OnMove、Ondragstart、Ondragendイベントにカスタムコールバックとコンテキストを渡すことができます。次のコールバックを渡す場合は、オンモーブコールバックを省略できないことに注意してください。

ドラッグハンドラーを追加しても、クリックイベントは非表示になりません。これは、オンドラゲンドのイベントの後に発射されます。

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

既存のsvg

をロードします この素晴らしいライブラリの最も強力なポイントの1つは、既存のSVGコードの再利用をサポートすることです。文字列として「注入」することも、既存のファイルを読み取り、変更することもできます。

自分で試すことができます。プロジェクトのルートにダウンロードして、この素敵なSVG図面に保存してください。次に、ページにロードし、DOMツリーに追加する前であっても、イベントハンドラーなどを追加する前であっても、そのスタイルや構造を変更します。

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

注

：ブラウザの同性ポリシーのため、ロードメソッドをテストするには、ローカルサーバーで例を実行する必要があります。

パフォーマンスの改善

DOMを操作するときにパフォーマンスを改善する1つの方法は、ドキュメントフレーズを使用しています。フラグメントは、DOMノード用の最小限のコンテナです。数年前に導入されたこのサブツリー全体を安価に操作してから、nの代わりに2つのメソッド呼び出しでnノードを含むサブツリー全体をページにクローンして追加することができます。実際の違いは、John Resigのブログで詳細に説明されています。

SNAPでは、2つの方法を使用して、フラグメントをネイティブに使用できます。

snap.parse（svg）は、svgコードを備えた文字列である単一の引数を取り、それを解析し、後で描画表面に追加できるフラグメントを返します。

1. snap.fragment（varargs）は、さまざまな数の要素または文字列を取得し、提供されたすべての要素を含む単一のフラグメントを作成します。

2. 特に大きなSVG図面の場合、フラグメントは、適切に使用すると、パフォーマンスを大幅に節約することができます。

   結論

これで、Advanced Snap.svgに関する記事を締めくくります。今、読者は、このライブラリで何ができるか、そしてそれを行う方法について明確な考えを持っている必要があります。もう少し学ぶことに興味があるなら、スナップドキュメントは開始するのに適した場所です。

いくつかの便利なリンク：

snap.svgチュートリアル。

snap.svgドキュメント。

高度なスナップSVG
• に関するよくある質問
• SNAP SVGは、Scalable Vector Graphics（SVG）を使用するために特別に設計された強力で柔軟なJavaScriptライブラリです。 SVGは、表示されている画面のサイズや解像度に関係なく明確さを維持する高品質でスケーラブルなグラフィックを作成できるため、Web開発の不可欠な部分です。 SNAP SVGは、SVGを操作およびアニメーション化するための堅牢なツールセットを提供することにより、この機能を強化し、開発者がWebサイトのインタラクティブでダイナミックなグラフィックスとアニメーションを簡単に作成できるようにします。 ？

SNAP SVGは、包括的な機能セットと使いやすさにより、他のSVGライブラリから際立っています。開発者がSVGを迅速かつ簡単に作成、操作、アニメーション化できるシンプルで直感的なAPIを提供します。さらに、SNAP SVGは、グラデーション、パターン、クリッピング、マスキングなどを含む幅広いSVG機能をサポートしているため、Web開発者のツールキットに汎用性の高いツールになります。またはフレームワーク？

はい、SNAP SVGは、他のJavaScriptライブラリやフレームワークと互換性があるように設計されています。これは、JQuery、React、Angularなどのツールと一緒に使用できることを意味します。これにより、各ツールの強度を活用して、より強力でインタラクティブなWebアプリケーションを作成できます。はい、SNAP SVGは、Chrome、Firefox、Safari、Internet Explorer 9以降など、すべての最新のブラウザーと互換性があるように設計されています。これは、幅広いデバイスとブラウザに正しく表示されるSVGを作成するために使用できることを意味します。 SVGをアニメーション化するため。これには、SVG要素の属性を時間の経過とともに変更する方法、パスに沿ってアニメーション化する方法などが含まれます。さらに、SNAP SVGは緩和機能の使用をサポートしているため、アニメーションの速度と流れを制御できます。レスポンシブデザインを作成するための優れたツール。 SVGはベクトルベースであるため、品質を失うことなく上下にスケーリングでき、レスポンシブデザインに最適です。さらに、SNAP SVGはSVGを操作およびアニメーション化するための方法を提供し、さまざまな画面サイズと解像度に適応する動的でインタラクティブなデザインを作成できます。 SNAP SVGはオープンソースライブラリです。つまり、自由に使用および変更できます。 Snap SVG Webサイトからライブラリをダウンロードするか、NPMなどのパッケージマネージャーを使用してインストールできます。 SNAP SVGの詳細をご覧ください。 SNAP SVG Webサイトは、ライブラリの機能と機能、および多くのデモと例に関する包括的なガイドを提供します。さらに、Stepoint、Dabbles、Githubなどのサイトで利用できる多数のチュートリアルや記事があり、Snap SVGの使用方法の詳細な情報と実用的な例を提供します。

以上が高度なsnap.svgの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。