Skip to content

Commit d4ad705

Browse files
21tcoelho21tcoelho
committed
Eraser Tool
1 parent a49a67f commit d4ad705

File tree

3 files changed

+117
-102
lines changed

3 files changed

+117
-102
lines changed

‎src/components/newBadge/ToolButtons.vue

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,23 @@
11
<template>
22
<div>
3-
<v-layout justify-center row>
4-
<v-btn id="selector" color="black" dark>
5-
<i class="fas fa-mouse-pointer"></i>
6-
</v-btn>
7-
<v-btn id="pencil" color="black" dark>
8-
<i class="fas fa-pen"></i>
9-
</v-btn>
10-
<v-btn id="eraser" color="black" dark>
11-
<i class="fas fa-eraser"></i>
12-
</v-btn>
13-
<v-btn id="square" color="black" dark>
14-
<i class="fas fa-square"></i>
15-
</v-btn>
16-
<v-btn id="circle" color="black" dark>
17-
<i class="fas fa-circle"></i>
18-
</v-btn>
19-
<v-btn id="magic" color="black" dark>
20-
<i class="fas fa-magic"></i>
21-
</v-btn>
22-
<v-btn id="text" color="black" dark>T</v-btn>
23-
</v-layout>
24-
</div>
3+
<v-layout justify-center row>
4+
<v-btn id="selector" color="black" dark
5+
><i class="fas fa-mouse-pointer"></i
6+
></v-btn>
7+
<v-btn id="pencil" color="black" dark><i class="fas fa-pen"></i></v-btn>
8+
<v-btn id="eraser" color="black" dark
9+
><i class="fas fa-eraser"></i
10+
></v-btn>
11+
<v-btn id="square" color="black" dark
12+
><i class="fas fa-square"></i
13+
></v-btn>
14+
<v-btn id="circle" color="black" dark
15+
><i class="fas fa-circle"></i
16+
></v-btn>
17+
<v-btn id="magic" color="black" dark><i class="fas fa-magic"></i></v-btn>
18+
<v-btn id="text" color="black" dark>T</v-btn>
19+
</v-layout>
20+
</div>
2521
</template>
2622

27-
<script>
28-
29-
var selector = document.getElementById("selector");
30-
var pencil = document.getElementById("pencil");
31-
var eraser = document.getElementById("eraser");
32-
var square = document.getElementById("square");
33-
var circle = document.getElementById("circle");
34-
var magic = document.getElementById("magic");
35-
var text = document.getElementById("text");
36-
</script>
37-
23+
<script></script>

‎src/views/HomeView.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
<div>
33
<v-layout class="ma-5" justify-center>
44
<div v-if="!isLoading">
5+
<v-btn @click="newBadge" style="margin-bottom: 30px;"
6+
>Create a New Badge</v-btn
7+
>
58
<UserDetails />
69
<div class="mt-5 orgs">Organizations</div>
710
<OrgList />
@@ -42,6 +45,9 @@ export default {
4245
process.env.VUE_APP_CLIENT_ID,
4346
"_blank"
4447
);
48+
},
49+
newBadge() {
50+
window.location.href = "#/newbadge";
4551
}
4652
}
4753
};
@@ -51,4 +57,4 @@ export default {
5157
.orgs {
5258
font-size: 20px;
5359
}
54-
</style>
60+
</style>

‎src/views/NewBadge.vue

Lines changed: 91 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,65 @@
11
<template>
2-
<body style ="background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20190331/pngtree-vector-white-abstract-background-design-templates-collection-wit-image_94438.jpg'); background-repeat: repeat; padding-top: 48px; padding-bottom: 25px;">
2+
<body style=" padding-top: 48px; padding-bottom: 25px;">
3+
<div>
4+
<h1 style="font-family: georgia; font-size: 45px; text-align: center;">
5+
<b>Create a New Badge!</b>
6+
</h1>
7+
<h2
8+
style="margin-bottom: 30px; font-family: georgia; font-size: 25px; text-align: center;"
9+
>
10+
<b>Design your own badge for your organization.</b>
11+
</h2>
312
<div>
4-
<h1 style ="font-family: georgia; font-size: 45px; text-align: center;">
5-
<b>Create a New Badge!</b>
6-
</h1>
7-
<h2 style ="margin-bottom: 30px; font-family: georgia; font-size: 25px; text-align: center;">
8-
<b>Design your own badge for your organization.</b>
9-
</h2>
10-
<div>
11-
<DrawButtons/>
12-
<canvas id = "canvas" width="900" height="600">
13-
</canvas>
14-
</div>
15-
<ToolButtons/>
13+
<DrawButtons />
14+
<canvas id="canvas" width="900" height="600"></canvas>
1615
</div>
17-
</body>
16+
</div>
17+
<ToolButtons />
18+
</body>
1819
</template>
1920

2021
<style>
21-
22-
canvas {
23-
background-color: white;
22+
canvas {
23+
background-color: #ffffff;
2424
border: 2px solid gray;
2525
border-radius: 2px;
2626
margin-bottom: 10px;
27-
}
28-
27+
}
2928
29+
body {
30+
background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20190331/pngtree-vector-white-abstract-background-design-templates-collection-wit-image_94438.jpg");
31+
background-repeat: repeat;
32+
}
3033
</style>
3134

3235
<script>
33-
import ToolButtons from '../components/newBadge/ToolButtons';
34-
import DrawButtons from '../components/newBadge/DrawButtons';
36+
import ToolButtons from "../components/newBadge/ToolButtons";
37+
import DrawButtons from "../components/newBadge/DrawButtons";
3538
36-
export default {
37-
name: 'NewBadge',
39+
export default {
40+
name: "NewBadge",
3841
components: {
39-
DrawButtons,
40-
ToolButtons,
41-
}
42+
DrawButtons,
43+
ToolButtons
4244
}
45+
};
4346
44-
45-
46-
window.addEventListener("load", () => {
47+
window.addEventListener("load", () => {
4748
const canvas = document.getElementById("canvas");
4849
50+
canvas.backgroundColor = "#ffffff";
51+
let haveColor = true;
52+
let pencilColor;
53+
4954
const ctx = canvas.getContext("2d");
5055
5156
function getMousePos(canvas, event) {
52-
var rect = canvas.getBoundingClientRect();
53-
return {
54-
x: (event.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
55-
y: (event.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
56-
};
57+
var rect = canvas.getBoundingClientRect();
58+
return {
59+
x:
60+
((event.clientX - rect.left) / (rect.right - rect.left)) * canvas.width,
61+
y: ((event.clientY - rect.top) / (rect.bottom - rect.top)) * canvas.height
62+
};
5763
}
5864
5965
ctx.strokeStyle = "#000000";
@@ -62,66 +68,83 @@
6268
6369
let shouldPaint = false;
6470
71+
var selector = document.getElementById("selector");
72+
var pencil = document.getElementById("pencil");
73+
var eraser = document.getElementById("eraser");
74+
var square = document.getElementById("square");
75+
var circle = document.getElementById("circle");
76+
var magic = document.getElementById("magic");
77+
var text = document.getElementById("text");
78+
6579
function startDrawing() {
66-
shouldPaint = true;
67-
var mousePos = getMousePos(canvas, event);
68-
ctx.moveTo(mousePos.x, mousePos.y);
69-
ctx.beginPath()
70-
continueDrawing(event);
80+
shouldPaint = true;
81+
var mousePos = getMousePos(canvas, event);
82+
ctx.moveTo(mousePos.x, mousePos.y);
83+
ctx.beginPath();
84+
continueDrawing(event);
7185
}
7286
7387
function continueDrawing(event) {
74-
if (shouldPaint) {
75-
var mousePos = getMousePos(canvas, event);
76-
ctx.lineTo(mousePos.x, mousePos.y)
77-
ctx.stroke();
78-
}
88+
if (shouldPaint) {
89+
var mousePos = getMousePos(canvas, event);
90+
ctx.lineTo(mousePos.x, mousePos.y);
91+
ctx.stroke();
92+
}
7993
}
8094
8195
function endDrawing() {
82-
shouldPaint = false;
96+
shouldPaint = false;
8397
}
8498
8599
//Allows user to draw on canvas
86100
drawing();
87101
88-
function drawing(event) {
89-
canvas.addEventListener("mousedown", startDrawing);
90-
document.addEventListener("mouseup", endDrawing);
91-
canvas.addEventListener("mousemove", continueDrawing);
102+
function drawing() {
103+
haveColor = true;
104+
if (ctx.strokeStyle == canvas.backgroundColor) {
105+
ctx.strokeStyle = pencilColor;
106+
if (!pencilColor) {
107+
ctx.strokeStyle = "#000000";
108+
}
109+
}
110+
canvas.addEventListener("mousedown", startDrawing);
111+
document.addEventListener("mouseup", endDrawing);
112+
canvas.addEventListener("mousemove", continueDrawing);
92113
}
93114
94115
// Changing colors
95116
document.querySelectorAll(".color").forEach(link => {
96-
link.addEventListener("click", function(event) {
97-
ctx.strokeStyle = this.style.backgroundColor;
98-
})
99-
})
117+
link.addEventListener("click", function() {
118+
if (haveColor) {
119+
ctx.strokeStyle = this.style.backgroundColor;
120+
pencilColor = this.style.backgroundColor;
121+
}
122+
});
123+
});
100124
101125
//Changing brush size
102126
document.querySelectorAll(".size").forEach(link => {
103-
link.addEventListener("click", function(event) {
104-
ctx.lineWidth = this.id;
105-
})
106-
})
107-
108-
127+
link.addEventListener("click", function() {
128+
ctx.lineWidth = this.id;
129+
});
130+
});
109131
110132
//Activates and deactivates buttons
111-
function removeDraw(event) {
112-
canvas.removeEventListener("mousedown", startDrawing);
113-
console.log("working");
133+
function removeDraw() {
134+
canvas.removeEventListener("mousedown", startDrawing);
114135
}
115136
116137
selector.addEventListener("click", removeDraw);
117138
pencil.addEventListener("click", drawing);
118-
eraser.addEventListener("click", removeDraw);
139+
140+
eraser.addEventListener("click", function() {
141+
drawing();
142+
haveColor = false;
143+
ctx.strokeStyle = canvas.backgroundColor;
144+
});
119145
square.addEventListener("click", removeDraw);
120146
circle.addEventListener("click", removeDraw);
121147
magic.addEventListener("click", removeDraw);
122148
text.addEventListener("click", removeDraw);
123-
124-
125-
})
126-
127-
</script>
149+
});
150+
</script>

0 commit comments

Comments
 (0)