Я пытаюсь изменить размер элемента canvas по ширине окна, используя VueJS.Я видел много примеров того, как это работает с vanilla JS, но по какой-то причине с VueJS я не могу заставить контент холста повторно визуализировать.
Пример прилагается.Пример изменен с версии JS Vanilla отсюда: http://ameijer.nl/2011/08/resizable-html5-canvas/
https://codepen.io/bastula/pen/yZXowo
<!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>