首页 > 文章 > 前端

使用 Resize Observer API 构建测量工具

来源：dev.to

时间：2024-12-28 20:10:10 372浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《使用 Resize Observer API 构建测量工具》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

web api - 一个非常有趣且很少被充分探索的领域。然而，有大量独特且非常有用的 api 可以帮助您为您的项目创建工具。

例如，跟踪尺寸变化是创建动态、响应式体验的关键。这就是 resize observer api 发挥作用的地方。

在本文中，我们将构建一个测量工具，实时显示可调整大小的框的宽度和高度。这个项目以实用和交互的方式展示了 resize observer api 和 browser 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 class="container">
    <div id="resizablebox" class="resizable">
      <span id="dimensions">width: 0px, height: 0px</span>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

第 3 步：设计应用程序样式

我们将添加一些样式，使可调整大小的框更具视觉吸引力：

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 将项目变为现实：

const resizableBox = document.getElementById('resizableBox');
const dimensions = document.getElementById('dimensions');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
    dimensions.textContent = `Width: ${Math.round(width)}px, Height: ${Math.round(height)}px`;
  }
});

resizeObserver.observe(resizableBox);

第 5 步：测试工具

在浏览器中打开index.html 文件。
拖动框的角来调整其大小。
观看尺寸立即更新！

它是如何运作的

resize observer api 被初始化以监视 resizingbox 元素的大小变化。每当观察到的元素的大小发生变化时，它就会触发回调。
resize observer entry 通过 borderboxsize 属性提供更新的尺寸。
通过修改可调整大小的框中的 <span> 元素的文本内容来动态提取和显示更新的宽度和高度值。

结论

在本教程中，我们使用 resize observer api 构建了一个有趣且交互式的测量工具。该项目演示了浏览器 api 如何简化复杂的任务。
如果您尝试此操作或进一步扩展它，请随时在评论中分享您的创作！
另外，请查看 ckeditor 博客，了解有关富文本编辑器的文章，并立即注册免费试用，开始您的 ckeditor 5 之旅！

以上就是《使用 Resize Observer API 构建测量工具》的详细内容，更多关于的资料请关注golang学习网公众号！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除