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
推薦する
MySQLをシンプルに学ぶ
序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...
MySQL で戻り値ありと戻り値なしのストアド プロシージャを書く 2 つの方法
プロセス1: 戻り値あり: proc_addNum が存在する場合はプロシージャを削除します。 プロ...
@media レスポンシブ CSS を使用してさまざまな画面に適応する例
定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...
MySQL チュートリアル データ定義言語 DDL の例 詳細な説明
目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...
Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...
Nginx に lua-nginx-module モジュールをインストールする方法
ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...
CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード
序文：私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...
VMwareでCentOSがインターネットにアクセスできない問題を素早く解決
昨日、VMware に CentOS7 をインストールしました。Tomcat パッケージを転送するた...
背景とリンクとして画像を書き込む方法（背景画像＋リンク）
写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...
h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法
XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...
Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策
序文最近、データベースのテーブルに 2 つのフィールドを追加しました。その後、ディスク容量不足のよう...
Podmanはコンテナを自動的に起動し、Dockerと比較します
目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...
Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします
事前に書いておきます：次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...
Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...
フォームの送信イベントが応答しない
1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...