如何解决如何从列表项中缩放画布?
我使用 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,translate: {y: 34},rotate: {z: TAU/4},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',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,translate: {y: 34},rotate: {z: TAU/4},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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。