CSS 極座標のサンプルコード

序文

このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の現在の衛星分布を表示するための極座標の作成が必要です。最初に思い浮かんだのは、echarts の極座標でした。要件の一部を満たす例は見つかりましたが、極座標はキャンバスで描画されており、衛星には独自の番号が付けられていたため、各ポイントに対応する衛星番号を区別することが困難でした。そこでCSSを使って極座標を描くことを考えました

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. 例

上の例、下のechartsの例

2. 設計手順

1. 緯度

複数のdiv要素、角を丸くする

2. 経度

回転によって実現される複数の 0.5px 境界線

行: [
        {
          id: 1,
          変換: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
          境界線スタイル: "solid",
          境界線の色: "#333",
        },
        {
          id: 2,
          変換: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
          borderStyle: "破線",
          境界線の色: "#91cc75",
        },
        {
          id: 3,
          変換: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
          境界線スタイル: "solid",
          境界線の色: "#333",
        },
        {
          id: 4,
          変換: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
          borderStyle: "破線",
          境界線の色: "#91cc75",
        },
      ]、

3. 衛星（ドット）

背景データには経度と緯度のみが含まれます。緯度は簡単に行え、90°の比率に合わせて配置できます。経度は回転に使用されます。ポイント上で直接回転しないことに注意してください。そうしないと、ボックスが回転するだけです。回転するには、ポイントの外側に div を配置する必要があります。美しくする必要がある場合は、ポイントを反対方向に回転して、番号付けのプラス効果を得ることができます。

3. コードの実装

コードは vue コンポーネントで記述されており、衛星は極座標のデータインターフェイスです。

<テンプレート>
  <div class="polar">
    <div class="polar-main">
      <div class="polar-1">
        <div class="polar-2">
          <div class="polar-3">
            <p
              v-for="緯度内の項目"
              :key="アイテムID"
              クラス="緯度"
              :スタイル="{
                上部: item.location.top、
                変換: item.location.transform、
              }"
            >
              {{ アイテム.値 }}
            </p>
            <div class="polar-center">
              <div class="衛星">
                <div v-for="衛星内のアイテム" :key="item.name">
                  <p
                    v-for="item.distribution 内の要素"
                    :key="ele.id"
                    クラス="サテライトボックス"
                    :スタイル="{
                      変換: rotate(ele.long)、
                    }"
                  >
                    <el-ツールチップ
                      クラス="アイテム"
                      効果="暗い"
                      :content="`経度: ${ele.long} 緯度: ${ele.lati}`"
                      配置="トップスタート"
                    >
                      <span
                        クラス="衛星"
                        :スタイル="{
                          背景色:ele.color、
                          トップ: トップ(ele.lati)、
                          変換: 回転(-1 * ele.long)、
                        }"
                        >{{ele.id}}</span>
                      >
                    </el-tooltip>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p
        v-for="行内の項目"
        :key="アイテムID"
        クラス="line"
        :style="{
          変換: アイテム.変換、
          境界線スタイル: item.borderStyle、
          境界線の色: item.borderColor、
        }"
      </p>
      <p
        v-for="経度内の項目"
        :key="アイテムID"
        クラス="経度"
        :スタイル="{
          上部: item.location.top、
          左: アイテム.場所.左、
          変換: item.location.transform、
        }"
      >
        {{ アイテム.値 }}
      </p>
    </div>
    <div class="衛星名"></div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      行: [
        {
          id: 1,
          変換: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
          境界線スタイル: "solid",
          境界線の色: "#333",
        },
        {
          id: 2,
          変換: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
          borderStyle: "破線",
          境界線の色: "#91cc75",
        },
        {
          id: 3,
          変換: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
          境界線スタイル: "solid",
          境界線の色: "#333",
        },
        {
          id: 4,
          変換: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
          borderStyle: "破線",
          境界線の色: "#91cc75",
        },
      ]、
      経度:
        {
          id: 5,
          値: "90°",
          位置： {
            上:「50%」、
            左:「100%」、
            変換: "translateY(-50%)",
          },
        },
        {
          id: 6,
          値: "180°",
          位置： {
            上:「100%」、
            左:「50%」、

            変換: "translateX(-50%)",
          },
        },
        {
          id: 7,
          値: "270°",
          位置： {
            上:「50%」、
            左: "0",

            変換: "translateX(-100%) translateY(-50%)",
          },
        },
        {
          id: 8,
          値: "360°",
          位置： {
            上: "0",
            左:「50%」、
            変換: "translateX(-50%) translateY(-100%)",
          },
        },
      ]、
      緯度:
        {
          id: 1,
          値: "90°",
          位置： {
            上:「50%」、
            左: "0",
            変換: "translateY(-50%) translateX(50%)",
          },
        },
        {
          id: 2,
          値: "60°",
          位置： {
            上: "0",
            左: "0",
            変換: "translateY(-50%) translateX(50%)",
          },
        },
        {
          id: 3,
          値: "30°",
          位置： {
            上: "-50%",
            左: "0",
            変換: "translateY(-50%) translateX(50%)",
          },
        },
      ]、
      衛星:
        {
          名前:「マスクの下」
          分布： [
            {
              id: "10",
              長さ: 46.397128,
              緯度: 56.397128,
              色: "#409eff",
            },
            {
              id: "08",
              長さ: 76.397128,
              ラティ: 32.916527,
              色: "#409eff",
            },
          ]、
        },
        {
          名前: 「不健康」、
          分布： [
            {
              id: "25",
              長さ: 156.397128,
              ラティ: 62.916527,
              色: "#f56c6c",
            },
            {
              id: "25",
              長さ: 316.397128,
              ラティ: 12.916527,
              色: "#f56c6c",
            },
          ]、
        },
        {
          名前: 「行方不明」、
          分布： [
            {
              id: "07",
              長さ: 256.397128,
              ラティ: 22.916527,
              色: "#118452",
            },
            {
              id: "18",
              長さ: 56.397128,
              ラティ: 27.916527,
              色: "#118452",
            },
            {
              id: "12",
              長さ: 66.397128,
              ラティ: 27.916527,
              色: "#118452",
            },
            {
              id: "16",
              長さ: 196.397128,
              ラティ: 67.916527,
              色: "#118452",
            },
          ]、
        },
      ]、
    };
  },
  メソッド: {
    上(lati) {
      ((90 - lati) / 90) * -90 - 10 + "px"を返します。
    },
    回転(long) {
      z = (long / 360) * 360 とします。
      `rotateZ(${z}deg)` を返します。
    },
  },
  // フィルター: {},
};
</スクリプト>
<スタイル スコープ lang='scss'>
$polarPiameter: 180px;
.polar-main {
  幅: $polarPiameter;
  高さ: $polarPiameter;
  位置: 相対的;
  ｐ {
    マージン: 0;
  }
  .polar-1 {
    幅: $polarPiameter;
    高さ: $polarPiameter;
    境界線のスタイル: solid;
    .polar-2 {
      幅: $polarPiameter * 2/3;
      高さ: $polarPiameter * 2/3;
      境界線スタイル: 破線;
      .polar-3 {
        幅: $polarPiameter/3;
        高さ: $polarPiameter/3;
        境界線スタイル: 破線;
        .polar-center {
          幅: 1px;
          高さ: 1px;
          背景色: #333;
        }
      }
    }
  }
  。ライン {
    高さ: $polarPiameter;
    右境界線の色: #333;
    右境界線の幅: 1px;
    右境界線のスタイル: solid;
    位置: 絶対;
    左: 50%;
    カーソル: ポインタ;
  }
  。経度、
  .緯度{
    高さ: 14px;
    行の高さ: 14px;
    フォントサイズ: 12px;
    色: #868585;
    位置: 絶対;
    カーソル: ポインタ;
  }
}
.polar-1,
.polar-2,
.polar-3,
.polar-center {
  境界線の半径: 50%;
  位置: 絶対;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  マージン: 自動;
  境界線の色: #91cc75;
  境界線の幅: 1px;
  ボックスのサイズ: 境界線ボックス;
  カーソル: ポインタ;
}
.polar-1:hover {
  境界線の幅: 2px;
}
.polar-2:hover{
  境界線の幅: 2px;
}
.サテライトボックス{
  位置: 絶対;
  幅: 1px;
  高さ: 1px;
  境界線の半径: 50%;
  背景色: 透明;
  。衛星 {
    位置: 絶対;
    左: -10px;
    幅: 20px;
    高さ: 20px;
    行の高さ: 20px;
    テキスト配置: 中央;
    境界線の半径: 50%;
    フォントサイズ: 14px;
    色: #fff;
    カーソル: ポインタ;
    zインデックス: 999;
    不透明度: 0.6;
    遷移: 0.6 秒;
  }
  .satellite:hover {
    背景色: #333 !重要;
  }
}
</スタイル>

要約する

サンプル画像:

ここに画像の説明を挿入

CSS 極座標のサンプルコードに関するこの記事はこれで終わりです。CSS 極座標に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: テキストの折り畳み特殊効果を実現する HTML+CSS の例

>>: トップナビゲーションバーメニューを作成するためのHTML+CSS