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
|
var WallpaperPicker = View.extend({
el: ".wallpaper",
events: {
"click .paper1": 'pick',
},
initialize: function(){
},
toggle: function(){
this.$el.toggleClass("active");
// toggle the class that makes the cursor a paintbucket
// $("body").removeClass("pastePaper");
},
pick: function(e){
$("body").toggleClass("pastePaper");
$(e.currentTarget).toggleClass("active");
}
})
// pattern
// scale
// foreground
// background
var WallpaperManager = function () {
var image = new Image ()
var imageData
var w, h
this.masks = []
this.init = function(){
this.load()
}
this.load = function(){
image.onload = function(){
this.loadImageData()
this.buildMasks()
app.tube('wallpaper-ready')
}.bind(this)
image.src = "/assets/img/palette.gif"
}
this.loadImageData = function(){
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
w = canvas.width = image.naturalWidth
h = canvas.height = image.naturalHeight
ctx.drawImage(image, 0,0)
imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
}
this.buildMasks = function(){
var mask
for (var y = 0; y < 6; y++) {
for (var x = 0; x < 16; x++) {
mask = this.buildMask(x,y)
this.masks.push(mask)
}
}
}
this.buildMask = function(x,y){
// add the offset of the top-left swatch
x = (x * 18) + 15
y = (y * 16) + 5
var mask = new Array(64)
var t = 0
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
t = ( w*(y+j) + x+i ) * 4
mask[j*8+i] = imageData[t] === 0
}
}
return mask
}
this.buildSwatches = function(black, white, scale) {
var swatches = this.masks.map(function(mask){
return this.buildSwatch(mask,black,white,scale)
}.bind(this))
return swatches
}
this.buildSwatch = function(mask,black,white,scale){
black = 'rgba(' + black.join(',') + ')'
white = 'rgba(' + white.join(',') + ')'
var canvas = document.createElement("canvas")
canvas.width = 8*scale
canvas.height = 8*scale
var ctx = canvas.getContext('2d')
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
ctx.fillStyle = mask[j*8+i] ? black : white
ctx.fillRect(i*scale, j*scale, scale, scale)
}
}
return canvas
}
}
|
