问题描述
上下文:
您好,我正在尝试在vuetify中使用fabricjs画布,并使其在所有屏幕中都具有响应性.但是目前,我面临一个问题,即画布无法基于卡片进行重新调整大小,而是使卡片溢出.我尝试使用v响应,但是它没有将纵横比应用于画布,可能是因为我使用的方式不正确.
Hi, I am trying to use fabricjs canvas within vuetify and make it look responsive in all the screens.But currently, I am facing an issue where the canvas is not re-sizing based on card,it overflows the card instead.I have tried using v-responsive but it does not apply the aspect ratio to canvas, could be, the way I am using it is not the right way.
任何建议都会有所帮助.
Any suggestions will be helpful.
这就是现在发生的事情
这就是我要实现的目标
结构
模拟:
代码
这是我到目前为止尝试过的.
This is what i have tried till now.
<v-layout>
<v-flex xs12>
<v-container class="red" fluid>
<v-layout row wrap align-center justify-center>
<v-flex xs3 sm3 md3 class="ma-2" class="purple">
<v-card flat tile class="yellow">
<v-card-title
id="fabric-canvas-wrapper"
class="green pb-0 justify-center"
>
<v-responsive aspect-ratio="4/3" class="mx-auto px-3">
<canvas id="c"> </canvas>
</v-responsive>
</v-card-title>
<v-card-text class="blue text-xs-center py-0">
<p class=".body-2 pa-2 text-truncate">Kangaroo Valley Safari</p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
https://codepen.io/adatdeltax/pen/OJWOPBo
推荐答案
canvas元素的宽度/高度与canvas元素的位图的宽度/高度不同.这意味着您只能使用CSS样式来解决此问题.
The width/height of the canvas element are different from the width/height of the canvas element's bitmap. This means that you can use only CSS styles to fix this problem.
canvas {
width: 100%;
height: 100%;
object-fit: cover;
}
如果要保持宽高比,可以使用填充技巧.
If you want to maintain the aspect ratio you can use the padding trick.
.canvas-container {
width: 100%;
padding-top: 100%; // for 1:1 ratio
}
这篇关于如何防止画布溢出卡并使其在vuetify中响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!