Question

我正在尝试使用VueJS将画布元素调整为窗口宽度。我已经看到了许多使用香草JS的示例，但是由于任何原因，使用VueJS都无法重新渲染画布内容。

附上示例。该示例是从此处的原始JS版本进行修改的：http://ameijer.nl/2011/08/resizable-html5-canvas/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Canvas Test</title>
</head>

<body>
    <div id="app">
        <canvas id="image-canvas" ref="imagecanvas" v-bind:width="width" v-bind:height="height" style="
            background-color: #000;">
        </canvas>
    </div>
</body>

</html>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                height: 512,
                width: 512,
                margin: 20,
            };
        },
        mounted() {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        },
        computed: {
            canvas: function () {
                return this.$refs.imagecanvas;
            },
            ctx: function () {
                return this.canvas.getContext('2d');
            }
        },
        methods: {
            handleResize: function () {
                // Calculate new canvas size based on window
                this.height = window.innerHeight - this.margin;
                this.width = window.innerWidth - this.margin;
                this.drawText();
            },
            drawText: function () {
                // Redraw & reposition content
                var resizeText = 'Canvas width: ' + this.canvas.width + 'px';
                this.ctx.textAlign = 'center';
                this.ctx.fillStyle = '#fff';
                this.ctx.fillText(resizeText, 200, 200);
            }
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.handleResize);
        }
    })
</script>

Answer 1

在这里解决：https://forum.vuejs.org/t/resize-canvas-element-based-on-window-change-using-vuejs/55497/2?u=bastula

解决方案是使用：nextTick。

因此，代替this.drawText()方法中的handleResize，它应该是：

this.$nextTick(() => {
    this.drawText();
})

可以在here中找到更新的工作CodePen。

使用VueJS

1 个答案: