Monday, 22 January, 2018 UTC
Summary
Most of the time, you’ll write Vue.js components that interact with a webpage via the DOM. But Vue’s reactivity system is useful for more than that. In this example, we’ll create a set of components to render a basic bar chart with Vue, in HTML5 canvas.
Setup This is more of an advanced project than usual, but you’ll still want your typical webpack-simple setup to work with.
Once you’ve got that, go ahead and replace the contents of your
App.vue component with this. (I won’t bother explaining it for now, as it’s not the focus of this article. This is just the app template and updates the chart values randomly.)App.vue
<template> <div id="app"> <h2>Bar Chart Example</h2> <!-- These are the custom components we'll create --> <my-canvas style="width: 100%; height: 600px;"> <my-box v-for="obj, index of chartValues" <!-- Values are percentages of the width of the canvas. --> :x1="((index / chartValues.length) * 100)" <!-- Each bar will take up an equal space of the canvas. --> :x2="((index / chartValues.length) * 100) + (100 / chartValues.length)" :y1="100" :y2="100 - obj.val" :color="obj.color" :value="obj.val" > </my-box> </my-canvas> </div> </template> <script> import MyCanvas from './MyCanvas.vue'; import MyBox from './MyBox.vue'; export default { name: 'app', components: { MyCanvas, MyBox }, data () { return { chartValues: [ {val: 24, color: 'red'}, {val: 32, color: '#0f0'}, {val: 66, color: 'rebeccapurple'}, {val: 1, color: 'green'}, {val: 28, color: 'blue'}, {val: 60, color: 'rgba(150, 100, 0, 0.2)'}, ] } }, // Randomly selects a value to randomly increment or decrement every 16 ms. // Not really important, just demonstrates that reactivity still works. mounted () { let dir = 1; let selectedVal = Math.floor(Math.random() * this.chartValues.length); setInterval(() => { if (Math.random() > 0.995) dir *= -1; if (Math.random() > 0.99) selectedVal = Math.floor(Math.random() * this.chartValues.length); this.chartValues[selectedVal].val = Math.min(Math.max(this.chartValues[selectedVal].val + dir * 0.5, 0), 100); }, 16); } } </script> <style> html, body { margin: 0; padding: 0; } #app { position: relative; height: 100vh; width: 100vw; padding: 20px; box-sizing: border-box; } </style>The canvas component itself is relatively simple. It simply creates a canvas element and injects the canvas rendering context into all of its child components via a reactive provider.
MyCanvas.vue
<template> <div class="my-canvas-wrapper"> <canvas ref="my-canvas"></canvas> <slot></slot> </div> </template> <script> export default { data() { return { // By creating the provider in the data property, it becomes reactive, // so child components will update when `context` changes. provider: { // This is the CanvasRenderingContext that children will draw to. context: null } } }, // Allows any child component to `inject: ['provider']` and have access to it. provide () { return { provider: this.provider } }, mounted () { // We can't access the rendering context until the canvas is mounted to the DOM. // Once we have it, provide it to all child components. this.provider.context = this.$refs['my-canvas'].getContext('2d') // Resize the canvas to fit its parent's width. // Normally you'd use a more flexible resize system. this.$refs['my-canvas'].width = this.$refs['my-canvas'].parentElement.clientWidth this.$refs['my-canvas'].height = this.$refs['my-canvas'].parentElement.clientHeight } } </script> MyBox.vue is where the magic happens. It’s an abstract component, not a “real” one, so it doesn’t actually render to the DOM. Instead, in the render function, we use normal canvas calls to draw on the injected canvas. As a result, each component still re-renders when their properties change without any extra work.MyBox.vue
<script> // Note how there's no template or styles in this component. // Helper functions to convert a percentage of canvas area to pixels. const percentWidthToPix = (percent, ctx) => Math.floor((ctx.canvas.width / 100) * percent) const percentHeightToPix = (percent, ctx) => Math.floor((ctx.canvas.height / 100) * percent) export default { // Gets us the provider property from the parent <my-canvas> component. inject: ['provider'], props: { // Start coordinates (percentage of canvas dimensions). x1: { type: Number, default: 0 }, y1: { type: Number, default: 0 }, // End coordinates (percentage of canvas dimensions). x2: { type: Number, default: 0 }, y2: { type: Number, default: 0 }, // The value to display. value: { type: Number, defualt: 0 }, // The color of the box. color: { type: String, default: '#F00' } }, data () { return { // We cache the dimensions of the previous // render so that we can clear the area later. oldBox: { x: null, y: null, w: null, h: null } } }, computed: { calculatedBox () { const ctx = this.provider.context // Turn start / end percentages into x, y, width, height in pixels. const calculated = { x: percentWidthToPix(this.x1, ctx), y: percentHeightToPix(this.y1, ctx), w: percentWidthToPix(this.x2 - this.x1, ctx), h: percentHeightToPix(this.y2 - this.y1, ctx) } // Yes yes, side-effects. This lets us cache the box dimensions of the previous render. // before we re-calculate calculatedBox the next render. this.oldBox = calculated return calculated } }, render () { // Since the parent canvas has to mount first, it's *possible* that the context may not be // injected by the time this render function runs the first time. if(!this.provider.context) return; const ctx = this.provider.context; // Keep a reference to the box used in the previous render call. const oldBox = this.oldBox // Calculate the new box. (Computed properties update on-demand.) const newBox = this.calculatedBox ctx.beginPath(); // Clear the old area from the previous render. ctx.clearRect(oldBox.x, oldBox.y, oldBox.w, oldBox.h); // Clear the area for the text. ctx.clearRect(newBox.x, newBox.y - 42, newBox.w, 100); // Draw the new rectangle. ctx.rect(newBox.x, newBox.y, newBox.w, newBox.h); ctx.fillStyle = this.color; ctx.fill(); // Draw the text ctx.fillStyle = '#000' ctx.font = '28px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(Math.floor(this.value), (newBox.x + (newBox.w / 2)), newBox.y - 14) } } </script> If all goes well, you should end up with something that looks like this:
This method could be used for any sort of canvas rendering, or even 3D content with WebGL and/or WebVR! Use your imagination!
For now though, here’s a challenge. Try to add individual event handling by passing the dimensions of each box to the injected provider and have the parent canvas decide where to dispatch events.
Have fun! 🚀