-
Notifications
You must be signed in to change notification settings - Fork 1
/
mlca_SimpleCanvasDisplay.js
77 lines (60 loc) · 2.29 KB
/
mlca_SimpleCanvasDisplay.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
/*
IDisplay SimpleCanvasDisplay: initial implementation of the canvas display
-canvas: holds Html5 canvas used for drawing on the page
-ctx: holds reference to Html5 canvas 2d context, used for drawing on the canvas
-cellSize: the size in pixels of the Cells
-dimensions: the number of cells in the x and y coordinates
+drawGrid(): draws a simple grid according to the canvas dimensions and the specified cell size.
-drawLayer(layer): if the layer.isVisible parameter is set to true, draws the cells
according to the interfaceData parameters of the layer
*/
mlca.SimpleCanvasDisplay = function(specs){
'use strict';
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext('2d');
this.cellSize = specs.cellSize;
this.dimensions = specs.dimensions;
this.canvas.width = this.cellSize * this.dimensions.x + 1;
this.canvas.height = this.cellSize * this.dimensions.y + 1;
var specs = {canvas:this.canvas, ctx:this.ctx, dimensions:this.dimensions, cellSize:this.cellSize};
mlca.IDisplay.call(this, specs);
};
mlca.SimpleCanvasDisplay.prototype = Object.create(mlca.IDisplay.prototype);
mlca.SimpleCanvasDisplay.constructor = mlca.SimpleCanvasDisplay;
//mlca.SimpleCanvasDisplay({canvas:this.canvas, ctx:this.ctx, dimensions:this.dimensions, cellSize:this.cellSize});
mlca.SimpleCanvasDisplay.prototype.drawGrid = function(){
'use strict';
var i;
this.ctx.strokeStyle = 'grey';
this.ctx.lineWidth = 1;
this.ctx.beginPath();
for (i = 1; i <= this.canvas.height; i += this.cellSize){
this.ctx.moveTo(1,i);
this.ctx.lineTo(this.canvas.width,i);
}
for (i = 1; i <= this.canvas.width; i += this.cellSize){
this.ctx.moveTo(i,1);
this.ctx.lineTo(i,this.canvas.height);
}
this.ctx.stroke();
};
mlca.SimpleCanvasDisplay.prototype.drawLayer = function(layer){
'use strict';
if (layer.isVisible === false) {
return;
}
var it = {x:0,y:0};
var color;
for (it.x = 0; it.x < layer.dimensions.x; it.x+=1){
for (it.y = 0; it.y < layer.dimensions.y; it.y+=1){
color = layer.interfaceData.stateRepresentation(layer.read(it));
if (color){
this.ctx.fillStyle = color;
this.ctx.fillRect(this.cellSize*it.x+1,
this.cellSize*it.y+1,
this.cellSize,
this.cellSize);
}
}
}
};