vue中让canvas适应外层盒子的宽高 |
您所在的位置：网站首页 › vue画布节点如何捕捉及赋值 › vue中让canvas适应外层盒子的宽高 |
vue中让canvas适应外层盒子的宽高
|
注：是适应不是自适应，指移动端不同尺寸的手机下，为了让canvas宽高能根据外层盒子的大小进行匹配，而非自适应（让canvas随外层盒子大小变化实时自变化）。 场景：
html： js： import F2 from '@antv/f2/lib/index-all' // 用这个方式引入 export default { data() { return { datetime3: '2016-06', data: null, chartHeight: 180, // 常见尺寸屏幕的高度设为默认值，下同 chartWidth: 327, } }, methods: { // 让canvas的宽高适应 getChartWH() { let chartDiv = document.getElementById('huanjing') let canvas = document.getElementById('container') canvas.width = chartDiv.offsetWidth canvas.height = chartDiv.offsetHeight - 15 } } mounted() { this.getChartWH() } }阿里F2图表结合vue的实现请见本人的其他帖子： （占位，之后来补上地址） 题外话（思路&踩的坑）：一开始是打算把offset拿到的宽高值赋值给this.chartWidth和this.chartHeight，然后在标签上通过:height=“chartHeight” :width="chartWidth"来绑定外层盒子的宽高，但把绑定宽高的方法放在create或beforeMount中时，外层盒子还未渲染在DOM上，document.getElementById这一步就报错了，故offset只能取到undefined，于是canvas的宽高会变成默认值；而放在Mounted中时，canvas会先在DOM渲染时取到默认值，将canvas绘制完成，再到挂载阶段执行绑定宽高的方法，然而此时:height=“chartHeight” :width="chartWidth"中的变量再改变已经没有用了，因为canvas在绘制完成后宽高不会再随样式变化而变化，只有刷新后才能改变。 那么如何在取得新的宽高值后让canvas刷新呢？不妨换个思路：宽高改变时，重新绘制新的canvas，那么在Mounted里改变canvas.width和canvas.height值就好了，这两个值改变就会重新绘制canvas，将获得的外层盒子的宽高赋值给这两个值，于是页面中的canvas宽高就会和外层元素适应了。 THX~ |
案例采用的是阿里的AntV F2图表库【本文地址】