Resize Observer API を使用した測定ツールの構築-jsチュートリアル-php.cn

Resize Observer API を使用した測定ツールの構築

Barbara Streisand

リリース： 2024-12-21 06:56:13

オリジナル

898 人が閲覧しました

Building a Measuring Tool with the Resize Observer API

Web API - 非常に興味深く、ほとんど調査されていない領域です。それでも、プロジェクト用のツールの作成に役立つ、ユニークで非常に便利な API が多数あります。

たとえば、サイズの変更を追跡することは、動的で応答性の高いエクスペリエンスを作成するための鍵となります。ここで Resize Observer API が登場します。

この記事では、サイズ変更可能なボックスの幅と高さをリアルタイムで表示する測定ツールを構築します。これは、Resize Observer API とブラウザ API 一般の機能を実践的かつ対話型の方法で実証するプロジェクトです。

サイズ変更オブザーバー API とは何ですか?

Resize Observer API は、要素のサイズの変更を検出できるブラウザー機能です。サイズ変更オブザーバーは個々の要素に対して機能します。これはすぐに使用できるため、レスポンシブデザインと動的な UI を構築するためのツールセットに追加するのに最適です。

その優れた点は次のとおりです:

軽くて使いやすい
ビューポート全体だけでなく、特定の要素のサイズの変化を追跡できます
レスポンシブなコンポーネントやサイズ変更可能なウィジェットの構築に最適です

私たちが構築しているもの

サイズ変更可能なボックスを作成し、その中に寸法が表示されます。ユーザーがボックスのサイズを変更すると、表示される寸法がリアルタイムで更新されます。

ステップ 1: プロジェクトのセットアップ

まず、プロジェクトの基本構造を設定しましょう:

resize-tool/
├── index.html
├── styles.css
├── script.js

ログイン後にコピー

ステップ 2: マークアップ

これはアプリの簡単なレイアウトです。サイズ変更可能なボックスには、その寸法を表示するためのテキストスパンが含まれています:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ログイン後にコピー

ステップ 4: リアルタイムのサイズ変更追跡を追加する

次に、Resize Observer API を使用してプロジェクトを実現しましょう。

resize-tool/
├── index.html
├── styles.css
├── script.js

ログイン後にコピー

ステップ 5: ツールのテスト

ブラウザでindex.htmlファイルを開きます。
ボックスの角をドラッグしてサイズを変更します。
寸法が即座に更新されるのを見てください!

仕組み

Resize Observer API は、resizableBox 要素のサイズ変更を監視するために初期化されます。監視されている要素のサイズが変化するたびにコールバックをトリガーします。
サイズ変更オブザーバーエントリは、borderBoxSize プロパティを通じて更新された寸法を提供します。
更新された幅と高さの値は、のテキスト内容を変更することで動的に抽出され、表示されます。サイズ変更可能なボックス内の要素。

結論

このチュートリアルでは、Resize Observer API を使用して、楽しくインタラクティブな 測定ツールを構築しました。このプロジェクトは、ブラウザ API が複雑なタスクを簡素化する方法を示します。
これを試したり、さらに拡張したりする場合は、コメントで自由に作品を共有してください!
また、CKEditor ブログでリッチテキストエディターに関する記事をチェックし、今すぐ無料トライアルにサインアップして CKEditor 5 を使い始めましょう!

以上がResize Observer API を使用した測定ツールの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。