今日、私たちのフロントエンドグループがそのような質問をし、それから白熱した議論が始まりました。
では、この質問を一緒に見てみましょう。この質問は、2つの小さな質問をします。
1.キャンバスにポリゴンを描画する方法
2.マウスで描画を選択する方法
それでは、2つの質問に答えましょう。
ポリゴンを描く
多角形を描くには、多角形図形の基本要素はパスです。パスは、さまざまな色と幅のラインセグメントまたは曲線で接続されたさまざまな形状のポイントのコレクションです。パスは、サブパスであっても閉じられます。パスを使用してグラフィックスを描画するには、いくつかの追加手順が必要です。
まず、パスの開始点を作成する必要があります
次に、drawコマンドを使用してパスを描画します。
次に、パスを閉じます
パスが生成されたら、パス領域をストロークまたは塗りつぶしてグラフィックをレンダリングできます。上記の手順では、いくつかのAPIを使用します。
beginPath（）
は新しいパスを作成します。生成された後、グラフィックス描画コマンドがパスに送られ、パスが生成されます。
closePath（）
がパスを閉じた後、グラフィック描画コマンドは再びコンテキストを指します。
stroke（）
は、図の輪郭を線で描きます。
fill（）
は、パスのコンテンツ領域を塗りつぶすことにより、無地のグラフィックを生成します。
詳細な描画プロセス
描画プロセスの詳細な説明は
次のとおりです。最初のステップは、パスを生成してbeginPathを呼び出すことです。基本的に、パスは多数のサブパスで構成されています。これらのすべてのサブパスがリストに含まれ、すべてのサブパス（線、円弧）がグラフを形成します。 。そして、このメソッドが呼び出されるたびに、リストがリセットされ、新しいグラフィックスを描画できます。（パスを設定した後、開始位置を指定する必要があります
。2番目のステップは、指定した関数を呼び出してパスを描画することです
。3番目のステップは、パスを閉じることです。closePath（必須ではありません）。
ペンプロッターモデル
三角形の例を描きます：
var ctx = canvas.getContext("2d");
ctx.beginPath(); //开始路径
ctx.moveTo(75, 50); //指定起始位置
ctx.lineTo(100, 75); //绘制到这个位置的一条线
ctx.lineTo(100, 25); //绘制到这个位置的一条线
ctx.fill(); //填充图形，默认就制动结束路径了このプロセスには、より便利な関数moveToがあり、この関数は実際には何も描画できません。上記のパスリストの一部です。
この関数の役割を見てください。
moveTo（）
は、ストロークを指定された座標xおよびyに移動します。
キャンバスが初期化されるかbeginPath（）が呼び出されると、通常はmoveTo（）関数を使用して開始点を設定します。moveTo（）を使用して、不連続なパスを描画することもできます。
このとき、紙の上に何かを描くプロセスと、ペン先があるポイントから別のポイントに移動するプロセスを想像できます。このプロセスのモードは、ペンプロッターモードと呼ばれます。したがって、キャンバスの2D描画モードもこのモードです。
これで、ポリゴンの描画に問題はありません。
キャンバス上で指定されたグラフィックを見つけます
まず、この問題の説明を完了してください：マウスが押されたときに特定の図形が選択されていると判断する方法は？
たとえば、次の図：
マウスはこの不規則な多角形の内側をクリックします、どのように判断しますか？
最初の反応はisPointInPath、またはすべてのグラフィックスの反復で、マウスポイントを使用してグラフィックスのポイントの衝突を検出します。この方法は使用できますが、アプリケーションシナリオは比較的小さく、パフォーマンスのオーバーヘッドは比較的大きくなります。グラフィックスが多すぎる場合、それぞれすべてを計算する必要があります。そうしないと、この相互作用は非常に不親切になります。
他に解決策はありますか？ゲーム業界の境界ボックスには一般的に使用されているソリューションがあります。境界ボックスとは何ですか？上の図を例にとると、外側に描かれた赤い線の枠がこのポリゴンの境界ボックスです。
非常に鮮やかな例は、会社が発行した月餅ボックスです。これは、丸い月餅の境界ボックスです????
バウンディングボックスのスキームには欠点があり、選択された範囲は比較的粗くなります。たとえば、上の赤いボックスでは、ポリゴンの一部ではないコンテンツが選択されています。バウンディングボックススキームを使用する場合は、下の図に示すように、十分に細かく分割する必要があります。
複数のバウンディングボックスが分離されている場合、グラフィックが特に複雑な場合、バウンディングボックスのスキームは少しラフになります。
次の画像もあります。境界ボックスを使用するのは非常に不親切です。
次に何をすべきか？
プログラム
特定のグラフをすばやく選択したい場合は、各グラフに対応するハッシュを作成できます。マウスをクリックすると、このハッシュを取得できます。ハッシュの値を使用してこのグラフを見つけます。このプロセスの時間の複雑さはO（1）です。
たとえば、キャンバス上のこれらのグラフィック：
私はまったく同じであった別のキャンバスにこれらの数字を描きました
上部のキャンバス（表示）は通常のグラフィックですが、各グラフィックにはRGBカラー値が割り当てられています。
下のキャンバス（非表示）は、このRGBカラー値を塗りつぶしまたはストロークとして使用します。
マウスをクリックすると、非表示のキャンバスと同じ位置にピクセルが配置されます。
そして、このピクセルのRGB値は、探しているハッシュです。
これまでのところ、2つの質問に答えています。
最近、フロントエンドグループの多くの人々がフロントエンドグラフィックの方向性を研究し始めていることに気づきました。フロントエンドグラフィックとフロントエンドアーキテクトは、2つの主要なフロントエンド方向であり、フロントエンドグラフィックは非常にユニークなフロントエンドの方向と必要なスキルです。他の方向とは異なり、アニメーション、データの視覚化、ゲームはすべてその分野です。市場には大きな需要があり、主要な求人サイトからも給与が非常に高く、現在の市場では人材が不足していることがわかります。
以前、Jingcheng Yidengは業界で唯一のフロントエンドグラフィックチュートリアル（シーズン1）を開始しました。基本的な数学から始め、2Dおよび3Dのすべての側面を含み、グラフィックの主要な知識ポイントとプログラミングスキルをすばやく習得するのに役立ちます。
彼らは今、グラフィックチュートリアルの第2シーズン、特に新しいH5ゲーム開発の戦闘、包括的なアップグレードを開始しました。目標は、最短時間でフロントエンドのグラフィックエンジニアの世界にあなたを連れて行くことです。
[フロントエンドユニバース]に注意を払う人には、2番目のシーズンに登録して最初のシーズンのチュートリアルを配布するという特別なメリットがあります。
下の写真のQRコードをスキャンして、
無料カードを受け取るには、わずか0.02元。
????????????