JavaScript用のSVGウィジェットを書いたように

免責事項

正直に言って、最初は仕事をしていました-ハブで製品について書くことです。 最初は、通常のPRエッセイに限定して、コンポーネントの主要な機能を詳細に焦点を当てずに説明することにしました。 もちろん、このようなストーリーは、製品のすべてのチップを完全に明らかにすることを可能にします。 一方、3番目の段落についてあくびをしたことは確かです。



したがって、この記事を著者だけでなく読者にも役立つようにしようと思います。 私たちが何をしたかではなく、どのようにしたかを説明します。 当然、私たちが直面した仕事から始めます。

挑戦する

あなたが複雑なSCADAシステム、ダッシュボード（申し訳ありませんが、この単語のロシア語への明確な翻訳は見ていません）、インタラクティブなメトリック管理システムを実装するWebプログラマー、またはあなたのWebサイトに時計を挿入する必要があると想像してくださいデザイン。 この場合、あらゆる種類のスケール、ツイスト、矢印（英語ではこれをゲージと呼びます）、時計、その他の「デバイス」、場合によってはインタラクティブなものを追加する必要があります。



一見、この問題は非常に簡単に解決されます。 たとえば、 Google Gaugeには無料のコンポーネントがあり、同じGoogleにはリクエストに応じてさまざまなものがあります。 一方、これらのライブラリのほとんどでは、オプションのセットは通常制限されています。 自分で何かをする必要があるとすぐに、「自分で書きやすい」という原則が機能し始めます。



したがって、私たちのタスクは、既存の「ツイスト」をカスタマイズできるだけでなく、ゼロから自分で作成できるシステムを作成することでした。 このシステムは、グラフィックプリミティブ（幾何学的形状、矢印、「試験管」、「ばね」などの特別な要素）などからウィジェットを組み立てることができるようになっています。 さらに、プログラマーが個々のウィジェット要素の値（たとえば、テキストボックス内の数字やスケール内の矢印の位置）をバインドできるスクリプト言語を開発したかったのです。



そのため、2人のプログラマー、QA （少し後に接続）とプロダクトマネージャー（「ユーザーが不快または困難なため」を強制的に全員が作業を中断し、すべてをやり直す ）のチームは、年末年始の直後に開発を開始しました。



この問題は、プロジェクトの作業を開始した時点で、Windows Forms用の類似の製品が既にあったという事実によって促進されました。 そこからWindows用のウィジェットオブジェクトモデルとウィジェットエディタを正常にドラッグしました。



解決すべきいくつかの技術的なタスクに直面しました。

• クロスプラットフォーム。 ウィジェットは、プラットフォームやテクノロジーに関係なく、純粋なHTML + JavaScriptで動作するはずでした。
• 基準 ウィジェットは、パラメーターをカスタマイズするためにCSSをサポートする必要があります。
• パフォーマンス。 値の変更中、矢印はスムーズに移動し、プロセッサの速度を100％低下させたり、ロードしたりすることはありません。
• 双方向性 ユーザーは、矢印を引いて値を設定できる必要があります（ウィジェットの速度は低下しません）。
• シンプル。 プログラマーはシンプルで快適である必要があります。Webページにウィジェットを埋め込むには、いくつかの明らかなコード行を使用する必要があります。

枠組み

始める前に、ツールを選択する必要がありました。 私たちは「JSを調理する方法がわからない」と叫ぶホリバーとinを呼ぶことに挑戦しますが、それでも私は言います。 「純粋な」JavaScriptで書くことは、プログラマーが過度に熱心で、注意を払い、「RAM」が多すぎることを要求するタスクです。 カスタム開発の経験から、純粋なJavaScriptでのRIAアプリケーションの高品質な開発は、FlashまたはSilverlightを使用して同等の品質のシステムを作成するよりも1.5〜2倍時間がかかると言えます（安心してください） 。



私たちの場合、プロのSilverlightチームが再訓練されることになって問題が悪化しました（また、Microsoftの戦略家は自分の開発者を困らせることがあります）。 したがって、「純粋な」JSを使用して同じレベルに達するには、数年と2、3の「マージされた」製品が必要になります。



ただし、状況から抜け出すための非常に良い方法を見つけました。ところで、JavaScriptでRIAを作成するすべての.NET開発者に積極的に推奨します。 この出力は、Microsoftによって開発されているScript＃と呼ばれるフレームワークでした。 C＃でコードを記述し、JavaScriptに変換できます。 さらに、正直に言います。出力のJSコードの品質は非常にまともです。 もちろん、そこにある関数のセットはかなり制限されていますが、個々のメソッドをJSで完全に実装する機会を節約し、その後、結果のファイルに変更を加えずに変換されます。 一般に、C＃で記述する場合は、試してみることをお勧めします。

建築

SVG対 キャンバス

HTML5を使用して開発を行う必要があることがすぐに明らかになりました。 確かに最初に尋ねた質問は、SVGとCanvasの選択でした。



一方では、SVGは、エディターで個々のオブジェクトとプリミティブから組み立てられたウィジェットを操作するのに最適でした。 一方、SVGのパフォーマンスとさまざまなブラウザでのサポートを恐れました。 コンポーネントが通常は最新バージョンのGoogle Chromeでのみ機能するような状況にはなりたくありませんでした。 さらに、重要なポイントはモバイルデバイスのサポートでした：iOS、Android、その他の動物園。



Canvasを見ると、多くのブラウザーでのハードウェアサポートは明らかなプラスであり、明らかなマイナスはアニメーション中のオブジェクトの複雑な再描画の必要性でした（たとえば、矢印を移動すると、その下のオブジェクトの一部を再描画する必要があります）。



少し考えた後、レンダリングシステム全体を、SVGまたはCanvas（hello、Cap）の仕様に依存しない抽象化で記述する必要があることに気付きました。 その後、特定のテクノロジを使用してオブジェクトをレンダリングおよび再描画するために、クラスの別個のセットが実装されます。 最初のバージョンでは、回転ごとに画像を再描画するのではなく、角度属性を使用して矢印をひねる機能に非常に惹かれたため、SVGに限定することにしました。 さらに、標準のSVGアニメーション（また、これには大きな問題がありました）とCSSを使用して、ウィジェットスタイルを制御したいと考えました。



したがって、すべてのウィジェットは純粋なSVGで描画されます。

オブジェクトモデル

少なくともエディターを積極的に使用するWindows Forms用の既製のシステムが既にあるという事実を考慮して、同じオブジェクトモデルを基本として採用し、Webに少し適応させることにしました。



開発がスクリプト＃で実行されたことを考慮すると、モデルの移植は平凡なコピーアンドペーストに削減されました。 残念ながら、1つのコードベースを離れる試みはすべて失敗しました。 動作、レンダリング、その他のささいなことにはあまりにも多くの違いがありました。 このため、多数の条件付きディレクティブとブランチが登場しましたが、コードを理解することは難しくなり、良いことよりも害が大きくなりました。 その結果、DRY原則は害にならないことが決定されました。 時間が示したように、私たちはすべてを正しく行いました。Webパーツのコードには、Windowsパーツと実質的に同一の部分はありませんでした。



ただし、客観的にするために、C＃製品とScript＃製品の間のコード分​​離の成功例があります。

連載

作業の開始点として機能するWinFormsウィジェットを保存するために、独自のバイナリ形式を使用しました。 この形式のファイルは、ウィジェットエディターによって読み取られて保存されました。 一方、私はウィジェットをWebバージョンのJavaScriptに「ネイティブ」に設定することを本当に望んでいました。 明らかに、このためにJSONを選択しました。



最初は、ウィジェットの説明を含むJSONがユーザー（つまり、製品を使用するプログラマー）によって作成されることが計画されていましたが、その後、このアイデアから少し離れました。 ウィジェットがエディターでエクスポートされると、オブジェクトの説明を含むJSONが作成されます。 最初のバージョンでは、最小の抵抗のパスを取り、.NET Framework 3.5に付属する標準のJSON-Serializerをねじ込みました。 実装の詳細には触れませんが、ウィジェットのオブジェクトモデルは標準的な方法でJSONにシリアル化され、結果はプログラマに返されます。 ウィジェットをページに追加するとき、プログラマーはこのJSONをコンストラクターパラメーターとして（JavaScriptで）渡します。 ウィジェットを作成するとき、JSONはエンジンによって解析され、SVGプリミティブのセットがその上に構築されます。



最も基本的な欠点の1つは、近い将来に既に計画されている戦いであり、結果のJSON記述に不必要な情報が豊富にあることです。 これは、標準のシリアル化メカニズムを使用し、不要なプロパティの束を含む「現状のまま」のオブジェクトのコピーを取得するためです（また、すべてのパブリックフィールドをシリアル化する必要があります）。 このため、JSONの記述は巨大に見え、多くのスペースを占有します。 JSONインスペクターを特別に作成して、 JSONに特別な形式の説明をロードすることで、プログラマーがウィジェットの配置を確認できるようにしました。



ちなみに、ウィジェットの作成時にJSONパラメーターを変更する機能を追加しました。そのため、一般的な説明があり、詳細を変更することは非常に簡単です。たとえば、スケールのスケールを変更したり、矢印を非表示にします。

実装

アニメーション

スケールの矢印が（ほとんどの場合）「量子ジャンプ」である値から別の値に移動するのではなく、すべての中間値をスムーズに渡し、目的の値を少し超えて、そこにエレガントに戻ることは明らかです。 さらに、ウィジェットがプロセッサの146％を消費しないようにして、このスムーズな移動を実行することが重要です。



一般的に、最初は正直にCSSアニメーションを使用しようとしました...残念ながら、私たちは2週間で負けてしまいました。 これはおそらく最も明るい瞬間であり、1つの標準で動作したくないブラウザから動物園によって生成されたWeb開発の機能が完全に明らかになります。

その結果、 クォッドライセンスがChrome非ライセンスInternet Explorerであることが完全に明らかになった後、私たちはJavaScriptで好みと遊女を使って独自のアニメーションを作成しました。 これは私たちの手を大きく解きました。 たとえば、加減速やその他の美しさに関するほとんどすべてのオプションを実装できました。



すべてが遅くなるという主な懸念は無駄であり、ウィジェット全体を矢印の位置の小さな変化に再描画するのをやめるとすぐに、すべてが飛び始めました。 結論-通常、SetIntervalによる最適化された「手動」再描画は、CSSアニメーションのパフォーマンスにほとんど劣りませんが、すべてのブラウザーで同じように機能します。

CSS

私たちのタスクは、CSSで個々のウィジェット要素の色を構成する機能をプログラマに提供することでした。 一般に、ここでは問題はありません。 SVG要素があり、クラスがあり、このクラスの設定を持つCSSがあります。 失望した唯一のことは、CSSでSVGの勾配を適切に設定できないことでした。 仕様により、SVGオブジェクトのグラデーション塗りつぶしを使用するには、最初に同じSVGで宣言的に記述する必要があります。



そのため、JavaScriptでオブジェクトのグラデーション塗りつぶしを設定できる別のメソッドを作成する必要がありました。 もちろん、これによりプログラマーはこの塗りつぶしを設定することができましたが、残念ながら、当初の目的どおり、CSSのすべての「設計」設定を行うことができませんでした。



もう1つの非常に不快な瞬間は、SVGに円錐形のグラデーション塗りつぶしがないことです。 これは、たとえば赤から緑に滑らかに変化する色のスケールを使用するツールにとって、非常に便利な塗りつぶし方法です。 したがって、WinFormsの多くのウィジェットで使用されていました。 円錐勾配線形を近似する必要がありましたが、これは常に成功するとは限りません。

双方向性

基本的に、ユーザーが矢印またはスライダーを引いて新しい値を設定できるようにウィジェットを作成しました。 もちろん、ウィジェットはコールバックを呼び出してJavaScriptに通知します。



mousedownとmouseupの処理は、ウィジェットが挿入されたdivに対して行われました。 マウスボタンのクリックで、ユーザーがクリックした要素を判断し、それに応じてさらにロジックを構築しました。



この場合、ユーザーが比較的複雑な境界を持つ領域をクリックするタイミングを判断するのはかなり難しいタスクでした。 「通常の」言語では、HitTestメソッドが通常これに使用されますが、SVGのJavaScriptでは、残念ながらそうではありません。



領域の境界は通常、ポリゴンではなくベジエ曲線によって設定されるため、角度の加算などの単純なアルゴリズムを適用することはできませんでした。 ほとんどのオブジェクトのクリックをテストするには、バウンディングボックスが非常に適していますが、三日月などの大きくて薄い三日月形の要素の形式には例外があります。



最終的には、各コンポーネントのHitTextを個別に記述し、分析ジオメトリを記憶し、オブジェクトをより単純なプリミティブで近似することにしました。



ユーザーのアクションに応じてウィジェットを再描画し始めたときに、別の小さなタスクが発生しました。 たとえば、ユーザーは矢印を「つかんで」、非常に高速でねじり始めます。 当然、再描画することがたくさんあります。 ベクトルSVGを使用する利点は、移動するオブジェクトのみを再描画（およびほとんどの場合は回転）し、他のオブジェクトには触れないことです。Canvasを使用すると、矢印の下にオブジェクトも再描画する必要があります。 一方で、時々かなりの量を書き直さなければならなかった。



もちろん、最初はすべてが非常に遅かったのですが、数時間の最適化の後、ちょうど動き始めました。 そして、ユーザーがウィジェットに複雑なスクリプトを追加できるようになり、直接移動する矢印だけでなく、スクリプトによってそれに関連する他のコンポーネントの束も再描画するようになりました。



ところで、興味深いメモ：ファイルシステムから読み込まれたページのJavaScriptのローカルバージョンは、同じブラウザーの同じページ上ではなく、サーバーから読み込まれたページよりもはるかに遅く動作します。 誰が理由を知っているのか、コメントで共有してください。



タッチデバイスの「ジェスチャ」のサポートを実装するには、完全に異なるイベント、たとえば、タッチスタート、タッチエンド、タッチムーブなどを処理する必要があります。 したがって、このサポートは個別に作成する必要がありました。

スクリプトと内部ロジック

SharpShooter Gaugesは、内部スクリプトをサポートすることで有名でした。 これらのスクリプトは、グラフィック要素の位置のスケールとガイドへのバインドを決定するため、ウィジェットの開発における重要なポイントでした。



さらに、スクリプトを使用して、要素のサイズをバインドしたり、表示されたテキストをフォーマットしたりできます。 スクリプトの存在により、個々のオブジェクトとその内部のプリミティブ間の相互作用を記述する、ほとんどあらゆる複雑さのウィジェットを作成できました。このタスクを、製品にウィジェットを埋め込むプログラマー（カプセル化、ええ）の肩に転送することはありません。



最初は、内部スクリプトをJavaScript構文に完全に変換するというアイデアがありました。 しかし、WinFormsウィジェットがシステムの新しいバージョンで突然機能しなくなると理解できない古いユーザーについて考えて、内部スクリプトをそのままにして、エクスポート時にスクリプトをJSに変換することにしました。 しかし、この英雄的なイニシアチブの量は、考えられない想像を超えるすべての条件を上回り、リリースをかなり遅らせました。



内部スクリプトの無条件の能力にもかかわらず、率直な短所があります。



まず、問題は、オブジェクト（たとえば、日付）を文字列に暗黙的にキャストすることにあります。 実際には、JavaScriptと.NETでは日付が異なる方法で文字列にキャストされるため、WindowsとHTML5のバージョンにかなりの非互換性が追加されます。



第二に、最初は複雑なスクリプトリンクが存在する場合、ウィジェットのパフォーマンスが急激に低下しました。 しかし、私たちは心を失いませんでした。 約1週間後、複雑なスクリプトはアニメーションに事実上影響を与えなくなり、IEでオブジェクトの非常に高速なドラッグアンドドロップでのみスローダウンが顕著になりました。 すべてがクロムで完璧に機能しました。 これでやめることにしました。

別の小さな問題

この記事を読んだ後、他の人が言及すべき他の問題についてコメントをしたので、このセクションではそれらの最も典型的なものについて説明します。



テキストのサイズを計算できない。 SVGでは、他の多くのグラフィックシステムと同様に、レンダリング後にテキストがどのサイズになるかを事前に決定する方法はありません。 WinFormsのバージョンはこのGDI関数に完全に依存しているため、その実装のためにトリッキーなスキームを考案する必要がありました。 これで、すべてのテキストが2回描画されます。 一度-寸法を見つけるために、そして通常の位置決めで二度目。



iOSデバイスでのRGBAの問題。 開発の途中で、異なるモデルのデバイスでウィジェットをテストすると、iPhone 4とiPadでは塗りつぶしが完全に黒であることがわかりました。 もちろん、このためのウィジェットは非常にゴシックで面白いように見えましたが、それでも完全に間違っています。 少し調べた結果、色を決定するために使用されたRGBA形式はiOS4 +のSafariではサポートされていないことに気付きました（驚くべきことに、すべてがiPhone 3Gで機能しました）。 その結果、RGBA値を使用場所に関係なく2つの個別の値（色と透明度）に分割しました。 助けた。

結論

「マーケティングのでたらめ」の記事の偏りを避け、技術的な観点から多かれ少なかれ有用にしたいと私はすでに言った。 したがって、JavaScriptでSVGを操作する際に役立ついくつかの結論を示します。



結論1.最新のブラウザのほとんどは、SVGで通常の操作をサポートし、視覚的に同じ結果をもたらします。

結論2. スクリプト＃フレームワークは、C＃を使用してJavaScriptとHTML5のRIAを開発できるように、その仕事をうまく行います。

結論3.標準のCSSアニメーションはまだ生でブラウザーに依存しているため、作業に使用できません。 SVGの一部の再描画に基づく「手動」アニメーションは、どこでも同じように機能し、最適化を最小限に抑えて、まったく遅くなりません（IEでも）。

結論4. CSSから通常、SVG要素のスタイルを設定できます。 グラデーション塗りつぶしを構成するには、最初に同じSVGで宣言する必要があるため、CSSだけを行うことはできません。 残念ながら、円錐鋳造はサポートされていません。

結論5. iOSデバイス（最も古いものを除く）は、RGBAカラーをサポートしていません。 したがって、スタイルを設定するときは、RGBとアルファを個別に指定する必要があります。

最後の結論。 私たち自身が好きなクールな製品を作りました:)。

もちろん、 ここで私たちに何が起こったのかを見ることができます 。