html - 如何从列表项中缩放画布?
问题描述
我用 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>
推荐阅读
- java - 如何解析具有多个包装类的嵌套 JSON?(春季启动项目)
- ffmpeg - 您如何使用 ffmpeg 连接多个视频?
- java - 在 JavaFX (JPA Repo, Service) 中添加 Spring 依赖注入
- python - Python 3 找不到模块
- angularjs - 如何观察指令属性的变化?
- javascript - 为什么当我在“datalist”元素中选择选择时检测到“keydown”(从 jQuery 中选择项目)
- angular - Ionic 4:添加滑动手势后离子内容滚动不起作用
- blazor - Blazored Typeahead SearchMethod 的返回类型错误
- python - 如何导出带有日期和外键的数据
- python - 根据条件插入随机值