RaphaëlJavaScriptライブラリを使用した簡単なベクトルグラフィックス

raphaëlは、アトラシアンのDmitry Baranovskiyによって書かれた小さなJavaScriptライブラリで、Webページでベクトルグラフィックを作成および操作できるようにします。使用は驚くほど簡単で、クロスブラウザー互換性があります。 Internet Explorer 6.0、Safari 3.0、Firefox 3.0、およびOpera 9.5のサポート。内部的には、RaphaëlはIEでVMLを使用し、他のブラウザでSVGを使用しています。

今、サークルと正方形を含むデモは問題ありませんが、ベクターグラフィックスの正当で実用的な使用を実証する例を作成したかったのです。では、リアルタイム統計測定はどうですか？これは、リアルタイムの「スプロケット」の使用レベルをプロットする現在のスプロケット使用ライングラフのスクリーンショットです。何よりも、それは作るためのスナップでした。

HTMLは簡単です。 キャンバスを保持するために見出しと容器が必要です。

開始するには、新しいグラフィックスキャンバスを生成する必要があります。私は常にすべてのコードをオブジェクト定義内に配置して別の名前空間を作成するのが好きなので、次のコードから始めます。

<h1>Current Sprocket Usage: <span></span>
</h1>
<div></div>

window.onloadイベントを使用して、spgraph.initメソッドを呼び出します。この方法では、raphaelを使用してキャンバスを作成します（「グラフ」、400、200）。最初の引数は、コンテナ要素のIDであり、他の2つは幅と高さを表します。返されたキャンバスオブジェクトをspgraph.graphプロパティに保存します。 次の行を使用すると、長方形を作成し、いくつかの属性を設定します。

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

rectメソッドにより、x座標、y座標、幅、高さ、およびオプションでコーナー半径を指定する長方形を描画できます。また、fill色を設定するためにattrメソッドへの呼び出しをチェックしたことに注意してください。すべてのraphaëlグラフィックオブジェクトはattrメソッドをサポートしており、設定できる属性の範囲があります。ラファエルは、すべての方法をチェックすることをサポートしています。これはすぐに利用できます。これまでの私たちの努力により、丸い角があるこの素敵な黒い長方形が生まれました。

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

さあ、ストライプを追加しましょう！これを行うには、次のループをspgraph.initメソッドに追加します。

ループは毎回10回のラインを描画します。最初のラインの赤い線と他の人の灰色のライン。 RaphaëlPathメソッドは、パスオブジェクトを返すパスモードの描画モードを初期化します。実際には何も描かれていません。チェーン可能なパスオブジェクトメソッドを使用する必要があります。 Movetoメソッドは、図面カーソルを指定されたXおよびY座標に移動し、Linetoメソッドはカーソルポイントから指定されたポイントまで線を描画します。その結果、以下のストライプの背景があります：

したがって、実際のグラフ行を描画する必要があります。垂直軸（ストライプで表される）は、使用率レベルです。水平軸は、10ピクセル増分で時間を表します。現実の世界では、グラフの各更新は、5秒ごとにAJAXコールを介して取得されますが、ここではランダムな値を作成してグラフを1秒ごとに更新するだけです。繰り返しになりますが、パス方式を使用して、5ピクセルの幅のラインを描画します。

パスを初期化し、そのようなspgraph.pathプロパティに参照を保存します。

すべてのアップデートでは、次のようなLinetoメソッドを使用して行を拡張します：

<h1>Current Sprocket Usage: <span></span>
</h1>
<div></div>

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

デモで機能することを忘れないでください。さて、スプロケットの使用グラフは、私が約束した正当な実用的な例ではないかもしれませんが、少なくとも、ほんの少しの努力でラファエルで達成できることを見ました。サイト上のドキュメントは完全ではありませんが、とにかく解決するのはそれほど難しくありません。自分で行ってみませんか？ Web上の迅速でシンプルなクロスブラウザー互換性のあるベクトルグラフィックスはかつてないほど簡単になりました。

for(var x = 10; x  10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

ラファエルjavascriptライブラリを使用した簡単なベクターグラフィックに関するよくある質問

raphael javascriptライブラリとは何ですか？

raphael javascriptライブラリは、開発者がベクターグラフィックスとWeb上で作業できるようにする強力なツールです。ベクトルグラフィックスの作成、操作、アニメーションのプロセスを簡素化し、WebサイトやWebアプリケーションに視覚的に魅力的な要素を追加したい開発者にとって優れた選択肢になります。ライブラリはクロスブラウザー互換性があり、SVG W3Cの推奨事項とVMLをグラフィックを作成するためのベースとして使用しています。つまり、事実上あらゆるブラウザで機能します。これを行うには、公式Webサイトからライブラリをダウンロードし、HTMLファイルにリンクできます。ライブラリが含まれたら、ラファエル関数を呼び出し、グラフィックスが描画される紙オブジェクトの幅と高さを指定することにより、ベクトルグラフィックスの作成を開始できます。ライブラリは、指定された期間にわたってオブジェクトの変換をアニメーション化できるアニメーションメソッドを含む、アニメーションのいくつかの方法を提供します。アニメーションの緩和を制御し、アニメーションが完了したときに実行されるコールバック関数を指定することもできます。

Raphael JavaScriptライブラリで形状を作成するにはどうすればよいですか？

Raphael JavaScriptライブラリは、形状を作成するいくつかの方法を提供します。たとえば、長方形の方法を使用して、長方形、円方式を作成して円を作成し、楕円メソッドを作成して楕円を作成できます。各方法には、左上コーナーの座標や長方方式の幅と高さなどの特定のパラメーター、または円のメソッドの中心座標と半径などの特定のパラメーターが必要です。この方法では、充填色、ストローク色、ストローク幅、不透明度など、さまざまな形状の属性を設定できます。また、ATTRメソッドを使用して、スケーリング、回転、翻訳などの形状に変換を適用することもできます。たとえば、クリックメソッドを使用して、クリックイベントハンドラーを形状に添付したり、マウスオーバーとマウスアウトイベントハンドラーを接続したりすることができます。これらの方法では、ユーザーアクションに応答するインタラクティブなグラフィックスを作成できます。

raphael javascriptライブラリに形状をグループ化するにはどうすればよいですか？この方法は、単一のユニットとして操作できる一連の形状を作成します。プッシュメソッドを使用してセットにシェイプを追加し、一度にセット内のすべての形状に変換またはアニメーションを適用できます。

raphael javascriptライブラリを使用して複雑なグラフィックスを作成できますか？基本的な形状に加えて、ライブラリはパスを作成する方法を提供します。パスは、複雑な形状とデザインを作成するために使用できます。複数の形状とパスを組み合わせて複雑なグラフィックスを作成することもできます。

Raphael JavaScriptライブラリで作成されたグラフィックをエクスポートするにはどうすればよいですか？

​​

Raphael JavaScriptライブラリで作成されたグラフィックスは、ブラウザーに依存してSVGまたはVMLとしてエクスポートできます。 PaperオブジェクトのToStringメソッドを呼び出すことにより、グラフィックのSVGまたはVMLソースコードにアクセスできます。この方法は、論文の現在の状態を表すSVGまたはVMLコードの文字列を返します。

Raphael JavaScriptライブラリでより多くのリソースを見つけることができますか？

Raphael JavaScriptライブラリのリソースについては、公式ウェブサイトをご覧ください。また、ライブラリの使用方法に関する段階的なガイドを提供するさまざまなオンラインチュートリアルやブログ投稿をご覧ください。さらに、GitHubやCodepenなどのコード共有プラットフォームで多くの例とデモを見つけることができます。

以上がRaphaëlJavaScriptライブラリを使用した簡単なベクトルグラフィックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。