vue.js - vuetify中如何防止canvas溢出卡并使其响应?
问题描述
语境:
嗨,我正在尝试在 vuetify 中使用 fabricjs 画布,并使其在所有屏幕中看起来都具有响应性。但目前,我面临一个问题,即画布没有根据卡片重新调整大小,而是溢出卡片。我曾尝试使用 v-responsive 但它不会将宽高比应用于画布,可能是,我使用它的方式不是正确的方式。
任何建议都会有所帮助。
这就是现在正在发生的事情
这就是我想要实现的目标
结构
嘲笑:
代码
这是我到目前为止所尝试的。
<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>
解决方案
推荐阅读
- frida - frida - 在 android apk 中挂钩套接字输入流
- broadcast - TRON 区块链:通过公共节点的 API 创建、签署和广播交易
- r - Function two plots in a 1*2 array
- python - 通过逻辑回归平衡
- javascript - JavaScript for 循环给我一个错误 - 循环对象数组
- python - 从另一个数据框创建 Pandas 高级列
- html - 您可以完全使用 XML 和 XSLT 构建网站吗?
- oracle - Oracle 函数不会编译
- ios - SwiftUI:如何创建垂直压缩时缩小的单行标签?
- java - 练习 JUnit 比较字符串的奇怪行为