javascript - 如何并排对齐 Canvas 和 div 元素

Question

我有一个 Canvas 和一个 div 元素，我想按照 60% 到 40% 的比例进行分割。到目前为止，我对显示所做的任何更改都确保首先显示 div，然后显示 Canvas 。

Div 元素具有具有 Canvas 元素颜色更改属性的按钮。

<div id = "ModelArea1">
    <div id = "Model1">
  <canvas id ="scene1" style="width: 100%; height:100%;">
    </canvas>
    </div>
    <div id ="SelectionArea1">
        <button type ="button" class ="ButtonFormat" onclick =displayVariations()>Fabric Textures</button>
        <div class = "FabricTectureOptions" style="display:none;">  
            <div class ="Fabric1">      
            </div>
            <div class ="Fabric2">      
            </div>
        </div>
        <button type ="button" class ="ButtonFormat" onclick =displayVariations()>Leather Textures</button>
    </div>
</div>

.Fabric1{
  background-image: url("https://i.ibb.co/B2kPznR/Fabric-Upholstery-Moss-Plain-Weave001-AO-1-K.jpg");
   height: 50px;
   width: 50px;
   border-radius: 10px;
   display: inline-block;
}
.Fabric2{
  background-image: url("https://i.ibb.co/kKZRpdm/Fabric-Upholstery-Moss-Plain-Weave001-COL-VAR3-1-K.jpg");
   height: 50px;
   width: 50px;
   border-radius: 10px;
   display: inline-block;
}
.ButtonFormat{
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  border-style: none outset outset none;
  outline: none;
  font-size: 12px;
}
.FabricTectureOptions{
  padding: 0 18px;
  overflow: hidden;
  background-color: #f1f1f1;
  border-radius: 10px;
}
#ModelArea1{
  width:100%;
  display:inline-flex;
}
#Model1{
  width: 60%;
}
#SelectionArea1{
  width: 40%;
}

我期望的是 Canvas 和 div 的高度和宽度相同，但并排。

| Canvas        |     Div  |
|               |          |
|               |          |

问题 1:如何正确对齐？

问题2:只需要把canvas包裹成div就可以实现吗？有替代方案吗？

这里是代码笔的链接: https://codepen.io/FarhaNaseem/pen/eYgKJZW

Answer 1

您可以简单地执行此操作，并且在一定程度上会起作用。

renderer.setSize(window.innerWidth * 0.6, window.innerHeight); // Set the width of the canvas initially to 60%;

但是每次调整窗口大小时，您可能都必须更新canvasWidth。我还通过 JS 创建了一些新容器并将子元素附加到其中。

// Canvas width dynamic resize
window.addEventListener("resize", () => {
   let ratio = 0.6
   let canvasWidth = window.innerWidth * ratio
   renderer.setSize(canvasWidth, window.innerHeight) // You can also manipulate this height by multiplying with the ratio
   camera.aspect = canvasWidth/ window.innerHeight
   camera.updateProjectionMatrix() // Must be called after any change of parameters.
});

// Add elements to the DOM in a wrapper container 
let ModelArea1 = document.querySelector("#ModelArea1")
let container = document.createElement("div")
container.classList.add("container")
document.body.append(container)
container.appendChild(renderer.domElement) // Append canvas to the container
container.appendChild(ModelArea1) // Append 40% area after canvas

这将为您生成更整洁的 DOM:

<div class="container">
  
  <canvas id="scene1" width="726" height="541">
    </canvas>

  <div id="ModelArea1">
    
    <div id="Model1">
    </div>
    
    <div id="SelectionArea1">
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Fabric Textures</button>
      <div class="FabricTectureOptions" style="display:none;">
        <div class="Fabric1">
        </div>
        <div class="Fabric2">
        </div>
      </div>
      <button type="button" class="ButtonFormat" onclick="displayVariations()">Leather Textures</button>
    </div>
    
  </div>
</div>

最后，您可以使用 display: flex 将容器转换为 Flexbox 元素

输出:

Codepen 演示:https://codepen.io/m4n0/pen/zYNeGVz