Question

我正在Vue.js项目中使用webgl实现动画。由于滚动会导致动画分支，因此我们将画布元素的尺寸初始化为document.body.clientHeight。

function initialize(){

    canvas = document.getElementById('metaball-canvas');
    console.log(document.body.clientHeight);
    canvas.width = window.innerWidth;
    canvas.height = document.body.clientHeight;
    var glConfig = {
        premultipliedAlpha: true,
        antialias: true,
        depth:true,
        alpha: true
    }

    gl = canvas.getContext('webgl', glConfig) || canvas.getContext('experimental-webgl', glConfig);

    if(!gl){
        console.error('cannot find gl', gl);
        return;
    }
    ...

但是，尽管首页上没有问题，但是如果您切换到另一页，则将继承第一个获取的高度，超过原始页面的高度。为了避免这个问题，应该采取什么样的方法来重新渲染画布元素？

Answer 1

Vue实例具有一个force update方法，当用户导航到另一个页面时可以调用该方法。

var vm = new Vue({
  el: '#canvas',
  data: data
})

function pageChangeHandler() {
    vm.$forceUpdate();
}

调整Vue.js画布元素的大小

1 个答案: