From d14845f92b4271d0a6bf7e51ec585aff0442997c Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 10 Feb 2020 18:01:46 +0000
Subject: [PATCH] tidy up
this included using vue data to render the canvas 2d elements.
---
canvas-10-feb/src/components/HelloWorld.vue | 181 ++++++--------------
canvas-10-feb/src/store/index.js | 8 +-
canvas-10-feb/src/views/About.vue | 3 +-
canvas-10-feb/src/views/Home.vue | 2 +-
4 files changed, 55 insertions(+), 139 deletions(-)
diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
index c45bb51..191f1c9 100644
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ b/canvas-10-feb/src/components/HelloWorld.vue
@@ -2,8 +2,7 @@
<div class="hello">
<h1>{{ msg }}</h1>
- <!-- <canvas ref="canvas" :width="windowWidth" :height="windowHeight"></canvas> -->
- <canvas ref="canvas" width="150" height="150"></canvas>
+ <canvas ref="canvas"></canvas>
<div class="controls">
<div class="btn-row">
@@ -21,6 +20,8 @@
</template>
<script>
+var canvas = null
+
export default {
name: 'HelloWorld',
props: {
@@ -29,152 +30,66 @@ export default {
data: function() {
return {
configRect: {
- x: 10,
- y: 30,
+ x: -25,
+ y: -25,
height: 50,
width: 50,
fill: 'rgb(200, 0, 0)'
+ },
+ configHandle: {
+ x: 25,
+ y: 25,
+ height: 4,
+ width: 4,
+ fill: 'black'
}
}
},
mounted() {
- // listen for mouse events
- // this.ctx.onmousedown = myDown
- // this.ctx.onmouseup = myUp
- // this.ctx.onmousemove = myMove
-
- this.ctx = this.$refs.canvas.getContext('2d')
- // this.draw()
- this.ctx.fillStyle = 'rgb(200, 0, 0)'
- this.ctx.fillRect(this.x, this.y, this.height, this.width)
-
- this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
- this.ctx.fillRect(30, 30, 50, 50)
-
- // this.ctx.font = '48px serif'
- // this.ctx.fillText('Hello world', 10, 50)
+ canvas = this.$refs.canvas
+ this.ctx = canvas.getContext('2d')
+ this.draw()
+ },
+ methods: {
+ draw() {
+ this.box(this.ctx, this.x, this.y)
+ console.log('draw')
+ },
+
+ box(ctx, x, y) {
+ ctx.setTransform(1, 0, 0, 1, x, y)
+
+ ctx.fillStyle = this.configRect.fill
+ ctx.fillRect(
+ this.configRect.x,
+ this.configRect.y,
+ this.configRect.height,
+ this.configRect.width
+ )
+
+ ctx.fillStyle = this.configHandle.fill
+ ctx.fillRect(
+ this.configHandle.x,
+ this.configHandle.y,
+ this.configHandle.height,
+ this.configHandle.width
+ )
+
+ ctx.stroke()
+ ctx.setTransform(1, 0, 0, 1, 0, 0)
+ },
+
+ clear(ctx) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ }
}
- // methods: {
- // draw() {
- // this.clear()
- // // redraw each shape in the shapes[] array
- // for (var i = 0; i < this.shapes.length; i++) {
- // // decide if the shape is a rect or circle
- // // (it's a rect if it has a width property)
- // if (this.shapes[i].width) {
- // rect(this.shapes[i])
- // } else {
- // circle(this.shapes[i])
- // }
- // }
- // },
- // clear() {
- // this.ctx.clearRect(0, 0, WIDTH, HEIGHT)
- // }
- // }
}
-
-// drag related variables
-// var dragok = false
-// var startX
-// var startY
-
-// handle mousedown events
-// function myDown(e) {
-// // tell the browser we're handling this mouse event
-// e.preventDefault()
-// e.stopPropagation()
-
-// // get the current mouse position
-// var mx = parseInt(e.clientX - offsetX)
-// var my = parseInt(e.clientY - offsetY)
-
-// // test each shape to see if mouse is inside
-// dragok = false
-// for (var i = 0; i < shapes.length; i++) {
-// var s = shapes[i]
-// // decide if the shape is a rect or circle
-// if (s.width) {
-// // test if the mouse is inside this rect
-// if (mx > s.x && mx < s.x + s.width && my > s.y && my < s.y + s.height) {
-// // if yes, set that rects isDragging=true
-// dragok = true
-// s.isDragging = true
-// }
-// } else {
-// var dx = s.x - mx
-// var dy = s.y - my
-// // test if the mouse is inside this circle
-// if (dx * dx + dy * dy < s.r * s.r) {
-// dragok = true
-// s.isDragging = true
-// }
-// }
-// }
-// // save the current mouse position
-// startX = mx
-// startY = my
-// }
-
-// // handle mouseup events
-// function myUp(e) {
-// // tell the browser we're handling this mouse event
-// e.preventDefault()
-// e.stopPropagation()
-
-// // clear all the dragging flags
-// dragok = false
-// for (var i = 0; i < shapes.length; i++) {
-// shapes[i].isDragging = false
-// }
-// }
-
-// // handle mouse moves
-// function myMove(e) {
-// // if we're dragging anything...
-// if (dragok) {
-// // tell the browser we're handling this mouse event
-// e.preventDefault()
-// e.stopPropagation()
-
-// // get the current mouse position
-// var mx = parseInt(e.clientX - offsetX)
-// var my = parseInt(e.clientY - offsetY)
-
-// // calculate the distance the mouse has moved
-// // since the last mousemove
-// var dx = mx - startX
-// var dy = my - startY
-
-// // move each rect that isDragging
-// // by the distance the mouse has moved
-// // since the last mousemove
-// for (var i = 0; i < shapes.length; i++) {
-// var s = shapes[i]
-// if (s.isDragging) {
-// s.x += dx
-// s.y += dy
-// }
-// }
-
-// // redraw the scene with the new rect positions
-// draw()
-
-// // reset the starting mouse position for the next mousemove
-// startX = mx
-// startY = my
-// }
-// }
-//
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
canvas {
border: 1px solid black;
- /* width: 100%; */
- /* height: 150px;
- background-color: white; */
}
.controls {
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index fb6015f..0107c20 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/canvas-10-feb/src/store/index.js
@@ -1,11 +1,11 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue'
+import Vuex from 'vuex'
-Vue.use(Vuex);
+Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
-});
+})
diff --git a/canvas-10-feb/src/views/About.vue b/canvas-10-feb/src/views/About.vue
index 3fa2807..90017eb 100644
--- a/canvas-10-feb/src/views/About.vue
+++ b/canvas-10-feb/src/views/About.vue
@@ -1,5 +1,6 @@
<template>
<div class="about">
- <h1>This is an about page</h1>
+ <h1>About</h1>
+ <p>Mucking about for nodenogg.in</p>
</div>
</template>
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 303d8e1..17f2749 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,6 +1,6 @@
<template>
<div class="home">
- <HelloWorld msg="Welcome to Vue Canvas & testing ground" />
+ <HelloWorld msg="Welcome to Vue & Canvas testing ground" />
</div>
</template>
--
GitLab