如何从列表项内缩放画布?

我用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>

解决方案:

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>

相关内容

最新更新

热门标签：