如何在 javascript 呈现的 div 上放置一个矩形？答案

【问题标题】：How can I place a rectangle over a javascript rendered div?如何在 javascript 呈现的 div 上放置一个矩形？
【发布时间】：2021-09-21 18:24:32
【问题描述】：

我正在使用一个名为wavesurfer 的波形显示/播放库。在我在下面创建的 sn-p 中，我有两个这样的 wavesurfer 对象被渲染并放置在“容器”类型的 div 元素中。我想将我自己的矩形放在这些 wavesurfer 对象之一上，并使用 javascript 控制它的位置。

我的问题是我不想使用浏览器窗口引用的绝对坐标。我想使用基于 wavesurfer 对象内的位置的相对坐标。此外，如您所见，即使我将矩形放在同一个 div 容器中，矩形也不会覆盖在波形上。

我是 javascript 新手，我意识到这可能是一个非常基本的问题，即在图片之类的东西上叠加形状，但到目前为止，我还没有找到适用于我正在工作的波形对象的解决方案与。

var wavesurfer = WaveSurfer.create({
  container: "#waveform",
  waveColor: "darkorange",
  progressColor: "skyblue",
  interact: false
});

wavesurfer.load("https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");


var wavesurfer2 = WaveSurfer.create({
  container: "#waveform2",
  waveColor: "silver",
  progressColor: "gainsboro",
  interact: false
});

wavesurfer2.load(  "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3"
);

<body>
  <script src="https://unpkg.com/wavesurfer.js"></script>
  <script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
  <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>
  
<div class="container" style="display: flex">
  <div id="waveform" style="width:60%"></div>
</div>

<div class="container" style="display: flex">
  <div id="waveform2" style="width:60%"></div>
</div>

  <div>
    <input type="range" id="slider" name="range_slider" min="0" max="11">
    <label for="range_slider">Range Slider</label>
  </div>
  
  
  <div id="selector">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect x="10" y="10" width="50" height="100" stroke="black" stroke-width="5" fill="none" />
      </svg>
    </div>

【问题讨论】：

标签： javascript html css wavesurfer.js

【解决方案1】：

您可以使用getBoundingClientRect 获取所需元素的偏移高度和左偏移，根据这些值，您可以轻松地相对于这些值定位任何元素。

如此处所述： https://stackoverflow.com/a/52477551/7457356

【讨论】：

【解决方案2】：

稍微不同的方法是在每个波形（或您想要的任何波形）上放置一个伪元素。

然后可以用 % 来定位，% 相对于波形的宽度。

这个 sn-p 通过在伪元素周围放置一个边框来绘制矩形，但如果需要不那么简单的形状，它可以有一个图像作为背景。

引入了类波形以简化这些元素的样式。

var wavesurfer = WaveSurfer.create({
  container: "#waveform",
  waveColor: "darkorange",
  progressColor: "skyblue",
  interact: false
});

wavesurfer.load("https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");


var wavesurfer2 = WaveSurfer.create({
  container: "#waveform2",
  waveColor: "silver",
  progressColor: "gainsboro",
  interact: false
});

wavesurfer2.load("https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");

.waveform {
  position: relative;
}

.waveform::before {
  content: '';
  width: 20px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: solid 5px;
  left: var(--left);
}

#waveform {
  --left: 60%;
}

#waveform2 {
  --left: 8%;
}

<body>
  <script src="https://unpkg.com/wavesurfer.js"></script>
  <script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
  <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>

  <div class="container" style="display: flex">
    <div id="waveform" class="waveform" style="width:60%"></div>
  </div>

  <div class="container" style="display: flex">
    <div id="waveform2" class="waveform" style="width:60%"></div>
  </div>

  <div>
    <input type="range" id="slider" name="range_slider" min="0" max="11">
    <label for="range_slider">Range Slider</label>
  </div>

CSS 变量已用于设置选择器沿波形的距离。对于任何特定的波形元素，这可以通过设置样式 --left 属性来更改，例如element.style.setProperty('--left', '60%');

【讨论】：