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
|
$(function(){
var drawing = false;
var color = colors.black;
var brush = new Brush({ style: 'pencil', color: color, width: 10 });
var workspace = document.getElementById("workspace");
var workspaceCtx = workspace.getContext('2d');
var lastpoint;
workspaceCtx.fillStyle = "#fff";
workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
var offset = $(workspace).offset();
workspace.onmousedown = function(e){
drawing = true;
}
document.onmousemove = function(e){
if (drawing) {
newpoint = new Point(e, offset);
if (lastpoint) {
draw(lastpoint, newpoint);
}
lastpoint = newpoint;
}
}
window.onmouseup = function(){
if (drawing) {
drawing = false;
lastpoint = null;
}
}
function draw(start, end){
var halfBrushW = brush.width/2;
var halfBrushH = brush.height/2;
console.log(start.x, end.x);
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;
workspaceCtx.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
}
}
function Point(e, offset) {
this.x = e.pageX - offset.left;
this.y = e.pageY - offset.top;
}
});
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);
}
|
