-
Notifications
You must be signed in to change notification settings - Fork 33
/
draw.js
107 lines (92 loc) · 2.74 KB
/
draw.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
$(document).ready(function () {
let canvas = $("#mycanvas");
let ctx = canvas.get(0).getContext("2d");
let canvasWidth = canvas.width();
let canvasHeight = canvas.height();
let PIXELSIZE = canvasWidth / DIMENSION;
let selectedColor = '#222244';
let enabled = true;
let filledPixels = {};
ctx.strokeStyle = 'rgba(0,0,0,0.1)';
for (let i = 0; i < DIMENSION; ++i) {
x = Math.floor(i * canvasWidth / DIMENSION);
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvasHeight);
ctx.stroke();
y = Math.floor(i * canvasHeight / DIMENSION);
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvasWidth, y);
ctx.stroke();
}
// firefox canvas mousedown fix
let firefoxmd = false;
window.addEventListener('mousedown', e => {
firefoxmd = true;
});
window.addEventListener('mouseup', e => {
if (firefoxmd === true) {
firefoxmd = false;
}
});
canvas.on('mousemove touchmove touchstart mousedown', mouseFill);
function mouseFill(e) {
e.preventDefault(); // Disables scrolling for touch events.
var touchstart = e.type === 'touchstart' || e.type === 'touchmove';
e = touchstart ? e.originalEvent : e;
var rect = $("#mycanvas");
var offsetX = touchstart ? e.targetTouches[0].pageX - rect.offset().left : e.offsetX;
var offsetY = touchstart ? e.targetTouches[0].pageY - rect.offset().top : e.offsetY;
if (!enabled) return;
if (!firefoxmd) return;
if (e.which != 1 && !touchstart) return;
pixel = [Math.floor(offsetX / PIXELSIZE), Math.floor(offsetY / PIXELSIZE)];
fillPixel(pixel);
}
function fillPixel(pixel) {
let key = pixel[0] + ',' + pixel[1];
filledPixels[key] = selectedColor;
ctx.fillStyle = selectedColor;
ctx.fillRect(pixel[0] * PIXELSIZE, pixel[1] * PIXELSIZE, PIXELSIZE - 1, PIXELSIZE - 1);
}
const PICKR = Pickr.create({
el: '#picker',
comparison: false,
components: {
opacity: false,
hue: true,
palette: true,
interaction: {
input: true,
}
}
});
PICKR.on('init', function () {
PICKR.setColor(selectedColor);
});
PICKR.on('show', function () {
enabled = false;
});
PICKR.on('hide', function () {
setTimeout(function () {
enabled = true;
}, 300);
});
PICKR.on('change', function () {
selectedColor = PICKR.getColor().toHEXA().toString();
});
window.save = function (x, y) {
var data = {};
data['x'] = x;
data['y'] = y;
data['data'] = filledPixels;
$("#saveButton").attr('disabled', 'true');
$("#spinner").html("Saving...");
$.post('draw.php?submit=1', data, function (rsp) {
$('body').append(rsp);
$("#saveButton").attr('disabled', false);
});
}
window.PICKR = PICKR;
});