Skip to content

Commit b886a7d

Browse files
21tcoelho21tcoelho
committed
Pencil Tool
1 parent aaae9bc commit b886a7d

File tree

5 files changed

+190
-70
lines changed

5 files changed

+190
-70
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,6 @@ backend/__pycache__/
9191

9292
# Config files
9393
.prettierrc.js
94+
95+
# Visual Studio
96+
/.vs

‎src/components/newBadge/Buttons.vue‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/components/newBadge/DrawButtons.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="btn-group">
3+
<v-btn class="color" fab="" style ="background-color: #E76F51 "></v-btn>
4+
<v-btn class="color" fab="" style ="background-color: #F2A261"></v-btn>
5+
<v-btn class="color" fab="" style ="background-color: #E9C46A"></v-btn>
6+
<v-btn class="color" fab="" style ="background-color: #2A9D8F"></v-btn>
7+
<v-btn class="color" fab="" style ="background-color: #264653"></v-btn>
8+
<v-btn class="color" fab="" style ="background-color: #000000"></v-btn>
9+
<v-btn class="size" id="5" fab="" small="">
10+
<i class="far fa-dot-circle fa-3x"></i>
11+
</v-btn>
12+
<v-btn class="size" id="10" fab="">
13+
<i class="far fa-dot-circle fa-4x"></i>
14+
</v-btn>
15+
<v-btn class="size" id="20" fab="" large="">
16+
<i class="far fa-dot-circle fa-5x"></i>
17+
</v-btn>
18+
19+
</div>
20+
</template>
21+
22+
<style>
23+
24+
.btn-group button {
25+
display: block;
26+
margin-bottom: 5px;
27+
}
28+
29+
.size {
30+
margin: auto;
31+
}
32+
33+
.btn-group {
34+
float: left;
35+
padding-left: 21.3%;
36+
padding-right: 20px;
37+
text-align: center;
38+
margin-top: 20px;
39+
}
40+
</style>

‎src/components/newBadge/ToolButtons.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<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>
25+
</template>
26+
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+

‎src/views/NewBadge.vue‎

Lines changed: 110 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,127 @@
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;">
3-
<div class = "mt-5 orgs">
4-
<h1 style ="font-family: georgia; font-size: 45px;">
5-
<center>
6-
<b>Create a New Badge!</b>
7-
</center>
8-
</h1>
9-
<h2 style ="margin-bottom: 30px; font-family: georgia; font-size: 25px;">
10-
<center>
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;">
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 style ="margin-bottom: 30px; font-family: georgia; font-size: 25px; text-align: center;">
118
<b>Design your own badge for your organization.</b>
12-
</center>
13-
</h2>
14-
<Buttons/>
15-
<v-layout style="margin: 10px;" justify-center="">
16-
<canvas id = "canvas" width="900" height="600">
17-
</canvas>
18-
</v-layout>
19-
</div>
20-
</body>
9+
</h2>
10+
<div>
11+
<DrawButtons/>
12+
<canvas id = "canvas" width="900" height="600">
13+
</canvas>
14+
</div>
15+
<ToolButtons/>
16+
</div>
17+
</body>
2118
</template>
2219

20+
<style>
21+
22+
canvas {
23+
background-color: white;
24+
border: 2px solid gray;
25+
border-radius: 2px;
26+
margin-bottom: 10px;
27+
}
28+
29+
30+
</style>
31+
2332
<script>
24-
import Buttons from '../components/newBadge/Buttons';
33+
import ToolButtons from '../components/newBadge/ToolButtons';
34+
import DrawButtons from '../components/newBadge/DrawButtons';
2535
2636
export default {
2737
name: 'NewBadge',
2838
components: {
29-
Buttons
39+
DrawButtons,
40+
ToolButtons,
3041
}
3142
}
32-
33-
function draw() {
34-
var canvas = document.getElementById('canvas');
35-
if (canvas.getContext) {
36-
var ctx = newCanvas.getContext('2d');
43+
44+
45+
46+
window.addEventListener("load", () => {
47+
const canvas = document.getElementById("canvas");
48+
49+
const ctx = canvas.getContext("2d");
50+
51+
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+
};
3757
}
58+
59+
ctx.strokeStyle = "#000000";
60+
ctx.lineWidth = 10;
61+
ctx.lineCap = "round";
62+
63+
let shouldPaint = false;
64+
65+
function startDrawing() {
66+
shouldPaint = true;
67+
var mousePos = getMousePos(canvas, event);
68+
ctx.moveTo(mousePos.x, mousePos.y);
69+
ctx.beginPath()
70+
continueDrawing(event);
3871
}
39-
</script>
4072
41-
<style>
42-
canvas {
43-
background-color: white;
44-
margin: auto;
45-
display: block;
46-
border: 2px solid gray;
47-
border-radius: 2px;
73+
function continueDrawing(event) {
74+
if (shouldPaint) {
75+
var mousePos = getMousePos(canvas, event);
76+
ctx.lineTo(mousePos.x, mousePos.y)
77+
ctx.stroke();
78+
}
4879
}
4980
50-
.title {
51-
padding: 20px;
52-
font-size: 80px;
81+
function endDrawing() {
82+
shouldPaint = false;
5383
}
54-
</style>
84+
85+
//Allows user to draw on canvas
86+
drawing();
87+
88+
function drawing(event) {
89+
canvas.addEventListener("mousedown", startDrawing);
90+
document.addEventListener("mouseup", endDrawing);
91+
canvas.addEventListener("mousemove", continueDrawing);
92+
}
93+
94+
// Changing colors
95+
document.querySelectorAll(".color").forEach(link => {
96+
link.addEventListener("click", function(event) {
97+
ctx.strokeStyle = this.style.backgroundColor;
98+
})
99+
})
100+
101+
//Changing brush size
102+
document.querySelectorAll(".size").forEach(link => {
103+
link.addEventListener("click", function(event) {
104+
ctx.lineWidth = this.id;
105+
})
106+
})
107+
108+
109+
110+
//Activates and deactivates buttons
111+
function removeDraw(event) {
112+
canvas.removeEventListener("mousedown", startDrawing);
113+
console.log("working");
114+
}
115+
116+
selector.addEventListener("click", removeDraw);
117+
pencil.addEventListener("click", drawing);
118+
eraser.addEventListener("click", removeDraw);
119+
square.addEventListener("click", removeDraw);
120+
circle.addEventListener("click", removeDraw);
121+
magic.addEventListener("click", removeDraw);
122+
text.addEventListener("click", removeDraw);
123+
124+
125+
})
126+
127+
</script>

0 commit comments

Comments
 (0)