使用 Resize Observer API 构建测量工具-js教程-PHP中文网

使用 Resize Observer API 构建测量工具

花韻仙語

发布： 2024-12-23 15:36:42

转载

850人浏览过

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 属性提供更新的尺寸。
通过修改可调整大小的框中的元素的文本内容来动态提取和显示更新的宽度和高度值。

结论

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

以上就是使用 Resize Observer API 构建测量工具的详细内容，更多请关注php中文网其它相关文章！