如何在javascript渲染的div上放置一個矩形？ -有解無憂

我正在使用一個名為wavesurfer的波形顯示/播放庫。在我創建的下面的片段中，我有兩個這樣的wavesurfer物件被渲染并放置在 "容器 "型別的div元素中。我希望將我自己的矩形放置在這些 wavesurfer 物件中的一個，并使用 javascript 控制它的位置。

我的問題是，我不想使用以瀏覽器視窗為參考的絕對坐標。我想使用基于 wavesurfer 物件中的位置的相對坐標。此外，正如你所看到的，即使我將其放置在同一個 div 容器中，矩形也沒有疊加在波形上。

我是javascript的新手，并且意識到這可能是一個關于在圖片等事物上疊加形狀的非常基本的問題，但是到目前為止，我還沒能找到一個適用于我所處理的波形物件的解決方案。

。

var wavesurfer = WaveSurfer.create({
  container: "#waveform"/span>,
  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"/span>,
  waveColor: "銀色",
  progressColor: "gainboro",
  interact: false。
});

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

<body>/span>
  <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.region.min.js"></script>/span>
  
<div class="container"/span> style="display: flex">
  <div id="waveform"/span> style="width: 60%"></div>>
</div>/span>

<div class="容器" style="顯示。flex">
  <div id="waveform2" style="width: 60%"></div>>
</div>/span>

  <div>/span>
    < input type="range"/span> id="slider" name="range_slider" min="0"/span> max="11"/span>> 
    <label for="range_slider"/span>> 范圍滑塊</label>。
  </div>/span>
  
  
  <div id="selector"> 
      <svg xmlns="http://www.w3. org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        < rect x="10"/span> y="10" width="50" stroke-width="5" fill="none" /> 
      </svg> 
    </div>/span>

uj5u.com熱心網友回復：

你可以使用getBoundingClientRect來獲得所需元素的偏移高度和偏移左側，基于這些值，你可以很容易地將任何元素相對于這些值定位。

正如這里所描述的。 https://stackoverflow.com/a/52477551/7457356

uj5u.com熱心網友回復：

稍有不同的方法是在每個波形上（或在你想要的任何波形上）放置一個偽元素。

然后這可以以%的方式進行定位，%是相對于波形的寬度而言的。

這個片段通過在偽元素周圍設定一個邊框來繪制矩形，但是如果需要一個不那么簡單的形狀，它可以使用一個影像作為背景。

引入了一個波形類，使這些元素的樣式更加簡單。

。

var wavesurfer = WaveSurfer.create({
  container: "#waveform"/span>,
  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"/span>,
  waveColor: "銀色",
  progressColor: "gainboro",
  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: ''/span>;
  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.region.min.js"></script>/span>

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

  <div class="容器" style="顯示。flex">
    < div id="waveform2" class="waveform"/span> style="width: 60%"></div>>
  </div>/span>

  <div>/span>
    < input type="range"/span> id="slider" name="range_slider" min="0"/span> max="11"/span>> 
    <label for="range_slider"/span>> 范圍滑塊</label>。
  </div>

CSS變數被用來設定選擇器在波形上的距離。對于任何特定的波形元素，這可以通過設定樣式--left屬性來改變，例如element.style.setProperty('-left', '60%');

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/331814.html

標籤：

上一篇：如何將所有物件在同一直線上對齊

下一篇：如何使用具有相同類別名稱的選擇元素的值在同名資料屬性上設定不同的值