From 8c3a3309a254845e21093ac4a0b9f4f6b0651b2e Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 10 Feb 2020 15:58:35 +0000
Subject: [PATCH] push the mess
---
canvas-10-feb/src/components/HelloWorld.vue | 154 ++++++++++++++++++--
1 file changed, 143 insertions(+), 11 deletions(-)
diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
index f5604c1..c45bb51 100644
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ b/canvas-10-feb/src/components/HelloWorld.vue
@@ -3,13 +3,13 @@
<h1>{{ msg }}</h1>
<!-- <canvas ref="canvas" :width="windowWidth" :height="windowHeight"></canvas> -->
- <canvas ref="canvas"></canvas>
+ <canvas ref="canvas" width="150" height="150"></canvas>
<div class="controls">
- <!-- <div class="btn-row">
+ <div class="btn-row">
<button on:click="popups.showPane = !popups.showPane">Button</button>
</div>
-
+ <!--
<div class="popup" v-if="popups.showPane">
<div class="popup-title">Pane Title</div>
<label>
@@ -26,23 +26,155 @@ export default {
props: {
msg: String
},
+ data: function() {
+ return {
+ configRect: {
+ x: 10,
+ y: 30,
+ height: 50,
+ width: 50,
+ fill: 'rgb(200, 0, 0)'
+ }
+ }
+ },
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.ctx.width = window.innerWidth
- this.ctx.height = window.innerHeight - 60
- this.ctx.fillStyle = '#777'
- this.ctx.fillRect(10, 20, 100, 100)
- this.ctx.fillRect(170, 20, 100, 100)
+ // 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)
}
+ // 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 {
- width: 100%;
- height: calc(100vh - 60px);
- background-color: white;
+ border: 1px solid black;
+ /* width: 100%; */
+ /* height: 150px;
+ background-color: white; */
}
.controls {
--
GitLab