-
Notifications
You must be signed in to change notification settings - Fork 1
/
pictogroup.js
99 lines (88 loc) · 2.38 KB
/
pictogroup.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
Drawings = new Meteor.Collection();
Drawings.subscribe();
if (Meteor.is_client) {
Template.hello.greeting = function () {
return "Welcome to pictogroup.";
};
Template.hello.events = {
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
var ctx = initCanvas();
var options = {ctx: ctx};
var drawObj = new Draw(options);
initDrawingSession(drawObj);
}
};
}
var initCanvas = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
return ctx;
};
var selectColor = function(drawObj) {
};
var initDrawingSession = function (drawObj) {
$('#canvas').mousedown(function(e) {
console.log('mousedown fired');
e.preventDefault();
var x = e.offsetX, y = e.offsetY;
$('#status').html(x + " - " + y);
drawObj.startDraw(x, y);
});
$('#canvas').mouseup(function (e) {
console.log('mouseup fired');
drawObj.isDrawing = false;
});
$('#canvas').mousemove(function (e) {
console.log('mousemove called');
if (drawObj.isDrawing) {
drawObj.line.push({x: e.offsetX, y: e.offsetY});
console.log('line length: '+drawObj.line.length);
drawObj.drawLine();
}
})
$('select').change(function() {
var color = $('select option:selected').val();
drawObj.setColor(color);
});
};
var Draw = function (options) {
this.color = options.color || "black";
this.line = [];
this.ctx = options.ctx;
this.isDrawing = false;
};
Draw.prototype.startDraw = function (x, y) {
this.line = [{x: x, y: y}];
this.isDrawing = true;
};
Draw.prototype.drawLine = function () {
console.log('drawLine called');
var n=1;
var start = this.line[0];
this.ctx.beginPath();
this.ctx.moveTo(start.x, start.y);
for (n; n<this.line.length; n++) {
this.ctx.lineTo(this.line[n].x, this.line[n].y);
}
this.ctx.strokeStyle = this.color;
this.ctx.stroke();
};
Draw.prototype.setColor = function(color) {
this.color = color;
};
var getCursorCoords = function (ctx) {
$('#canvas').mousemove(function(e) {
var x = e.offsetx, y = e.offsety;
$('#status').html(x + " - " + y);
ctx.moveto(x-1,y-1);
ctx.lineto(x,y);
ctx.stroke();
});
};
if (Meteor.is_server) {
Meteor.startup(function () {
// code to run on server at startup
});
}