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
108
109
110
111
112
113
|
$(function(){
if ($("#workspace").length == 0) return;
var drawing = false;
var color = colors.black;
var brush = new Brush({ style: 'pencil', color: color, width: 10 });
var workspace = cw("#workspace");
var surface = cw("#surface");
var lastpoint;
clearWorkspace();
var offset;
$(workspace).mousedown(function(e){
drawing = true;
lastpoint = new Point(e, offset);
draw(lastpoint, lastpoint);
});
$(window).mousemove(function(e){
if (drawing) {
newpoint = new Point(e, offset);
if (lastpoint) {
draw(lastpoint, newpoint);
}
lastpoint = newpoint;
}
});
$(window).mouseup(function(){
if (drawing) {
drawing = false;
lastpoint = null;
}
finishDrawing();
$("#chat-message").focus();
});
$(window).on("drawing:start", function(){
offset = $(workspace).offset();
});
function clearWorkspace(){
workspace.clear("#ffffff");
}
$("#save-drawing").click(function(){
var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
console.log(uri.length);
console.log(atob(uri).length);
var params = {
image: uri,
nick: Game.nick
};
$.post("/upload", params, function(){
console.log("saved");
});
clearWorkspace();
$("#drawing").hide();
});
// 0) When the pattern is set, paint it to a virtual canvas
// and key out white, producing a mask.
// 1) Paint a (colored) line on the virtual workspace with this draw func vvvv
// 2) Multiply the pattern mask against the workspace
// 3) Display the result
function draw(start, end){
var halfBrushW = brush.width/2;
var halfBrushH = brush.height/2;
var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
var angle = Trig.angleBetween2Points( start, end );
for ( var z=0; (z<=distance || z==0); z += 2 ) {
var x = start.x + (Math.sin(angle) * z) - halfBrushW;
var y = start.y + (Math.cos(angle) * z) - halfBrushH;
workspace.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
}
}
// 4) When you finish drawing a stroke, merge the workspace with the
// painting surface and clear the workspace so we're ready for another
// stroke
function finishDrawing(){
}
// Hotkey ideas..
// [] -- larger/smaller Brush
// \ -- rotate brush 90 degrees
});
function Brush (b) {
this.opt = b;
b.height = b.height || b.width;
var canvas = this.canvas = document.createElement("canvas");
var ctx = this.ctx = canvas.getContext('2d');
this.width = canvas.width = b.width;
this.height = canvas.height = b.height;
this.color = b.color;
canvas.className = "brush";
var hw = canvas.width / 2, hh = canvas.height / 2;
var id = ctx.getImageData( 0, 0, canvas.width, canvas.height );
var data = id.data;
for (var i = 0; i < canvas.width; i++) {
for (var j = 0; j < canvas.height; j++) {
var mag = Trig.magnitude({ x: i - hw, y: j - hh });
var offset = (j * canvas.width + i) * 4;
if (offset > data.length) continue;
data[ offset ] = b.color.r;
data[ offset + 1 ] = b.color.g;
data[ offset + 2 ] = b.color.b;
data[ offset + 3 ] = mag < hw ? 255 : 0;
}
}
ctx.putImageData(id, 0, 0);
$("#drawing").append(canvas);
}
|
