如何从列表项中缩放画布？答案

【问题标题】：How to scale a canvas from within a list item?如何从列表项中缩放画布？
【发布时间】：2021-04-22 05:47:17
【问题描述】：

我使用 Zdog 创建了一个 3D 模型，它会根据屏幕大小调整大小。这按预期工作：

const TAU = Zdog.TAU;

let hat = new Zdog.Illustration({
  element: '.zdog-canvas', // set canvas with selector
  dragRotate: true,
  rotate: {x: TAU/4, z: TAU/-6},
    translate: {y: 20},
  zoom: 4,
    onResize: function( width ){
              this.zoom = width / 300;
          }
});


var dome = new Zdog.Hemisphere({
  addTo: hat,
  diameter: 80,
  stroke: 20,
  color: 'blue',
  fill: true,
});

var brim = new Zdog.Ellipse({
  addTo: dome,
  width: 95,
  height: 73,
  quarters: 2,
  stroke: 20,
  translate: {y: 34},
  rotate: {z: TAU/4},
  fill: true,
  color: 'blue'
});

function animate() {
  hat.rotate.z += 0.03;
  hat.updateRenderGraph();
  // animate next frame
  requestAnimationFrame( animate );
}

animate();

body{
    margin: 0;
}

.myDiv{
    height: 100%;
    min-height: 100%;
    margin: 0;
}

.zdog-canvas {
  display: block;
  position: absolute;
  height: 100%;
  background: #FDB;
  cursor: move;
}

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

<html>
    <body>
        <div>
            <div class='myDiv'>
                <canvas class="zdog-canvas" width="800" height="500"/>
            </div>
        </div>
    </body>
</html>

但是，如果我将此 3d 模型放在列表项中，则 3d 模型会溢出屏幕底部，而不是缩放列表项的高度。我的目标最终是有一个列表项，其中左侧包含 3d 模型，右侧包含一些描述它的文本。我该如何解决这个问题，以便当模型放置在列表项标签内时，它会相对于列表项的高度进行缩放？

const TAU = Zdog.TAU;

let hat = new Zdog.Illustration({
  element: '.zdog-canvas', // set canvas with selector
  dragRotate: true,
  rotate: {x: TAU/4, z: TAU/-6},
    translate: {y: 20},
  zoom: 4,
    onResize: function( width ){
              this.zoom = width / 300;
          }
});


var dome = new Zdog.Hemisphere({
  addTo: hat,
  diameter: 80,
  stroke: 20,
  color: 'blue',
  fill: true,
});

var brim = new Zdog.Ellipse({
  addTo: dome,
  width: 95,
  height: 73,
  quarters: 2,
  stroke: 20,
  translate: {y: 34},
  rotate: {z: TAU/4},
  fill: true,
  color: 'blue'
});

function animate() {
  hat.rotate.z += 0.03;
  hat.updateRenderGraph();
  // animate next frame
  requestAnimationFrame( animate );
}

animate();

body{
    margin: 0;
}

.myIcon{
    height: 100%;
    min-height: 100%;
    margin: 0;
}

.zdog-canvas {
  display: block;
  position: absolute;
  height: 100%;
  background: #FDB;
  cursor: move;
}

li{
  width: 100%;
  height: 20vh;
  background: red;
  color: black;
}

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

<html>

<body>
  <div>
    <ul>
      <li>
        <div class='flexbox-container'>
          <div class='myIcon'>
            <canvas class="zdog-canvas" width="800" height="500" />
          </div>
          <h1>some text</h1>
        </div>
        <div class='flexbox-container'>
          <div class='myIcon'>
            <canvas class="zdog-canvas" width="800" height="500" />
          </div>
          <h1>some text</h1>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

【问题讨论】：

标签： html css html5-canvas html-lists

【解决方案1】：

解决方案：

const TAU = Zdog.TAU;

let hat = new Zdog.Illustration({
  element: '.zdog-canvas', // set canvas with selector
  dragRotate: true,
  rotate: {x: TAU/4, z: TAU/-6},
    translate: {y: 20},
  zoom: 4,
    onResize: function( width ){
              //console.log('adjusted width ')
              this.zoom = width / 300;
          }
});


var dome = new Zdog.Hemisphere({
  addTo: hat,
  diameter: 80,
  stroke: 20,
  color: 'blue',
  fill: true,
});

var brim = new Zdog.Ellipse({
  addTo: dome,
  //diameter: 80,
  width: 95,
  height: 73,
  quarters: 2,
  stroke: 20,
  translate: {y: 34},
  rotate: {z: TAU/4},
  fill: true,
  color: 'blue'
});

//illo.updateRenderGraph();

function animate() {
  // rotate illo each frame
  hat.rotate.z += 0.03;
  hat.updateRenderGraph();
  // animate next frame
  requestAnimationFrame( animate );
}

animate();

body{
    margin: 0;
}

.flexbox-container{
  display: flex;
  flex-direction: row;
}

.myIcon{
  flex: 1;
    height: 100%;
    min-height: 100%;
    margin: 0;
}

.text-div{
  flex: 1;
}

.zdog-canvas {
  display: block;
  position: absolute;
  height: 100%;
  max-height: 20vh;
  background: #FDB;
  cursor: move;
}

.list-item{
  width: 100%;
  height: 20vh;
  background: red;
  color: black;
  margin: 1vw 0;
}

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

<html>

<body>
  <div>
    <ul>
      <li class="list-item">
        <div class='flexbox-container'>
          <div class='myIcon'>
            <canvas class="zdog-canvas" width="800" height="500" />
          </div>
          <div class="text-div"> stuff</div>
        </div>
      </li>
      <li class="list-item">
        <div class='flexbox-container'>
          <div class='myIcon'>
            <canvas class="zdog-canvas" width="800" height="500" />
          </div>
          <div class="text-div"> stuff</div>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

【讨论】：