Fixed bugs in canvas intialization. Started layers implementation.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
npalomba 2019-03-31 16:01:46 +02:00
parent e68f495d50
commit 42a8ce3c4a
3 changed files with 11 additions and 28 deletions

View File

@ -1,16 +1,16 @@
function Canvas(height, width, canvas) { function Canvas(width, height, canvas) {
this.canvasSize = [width, height], this.canvasSize = [width, height],
this.canvas = canvas, this.canvas = canvas,
this.initialize = function() { this.initialize = function() {
var maxHorizontalZoom = Math.floor(window.innerWidth/canvasSize[0]*0.75); var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
var maxVerticalZoom = Math.floor(window.innerHeight/canvasSize[1]*0.75); var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom); zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
if (zoom < 1) zoom = 1; if (zoom < 1) zoom = 1;
//resize canvas //resize canvas
this.canvas.width = canvasSize[0]; this.canvas.width = this.canvasSize[0];
this.canvas.height = canvasSize[1]; this.canvas.height = this.canvasSize[1];
this.canvas.style.width = (this.canvas.width*zoom)+'px'; this.canvas.style.width = (this.canvas.width*zoom)+'px';
this.canvas.style.height = (this.canvas.height*zoom)+'px'; this.canvas.style.height = (this.canvas.height*zoom)+'px';
@ -18,8 +18,8 @@ function Canvas(height, width, canvas) {
this.canvas.style.display = 'block'; this.canvas.style.display = 'block';
//center canvas in window //center canvas in window
this.canvas.style.left = 64+canvasView.clientWidth/2-(canvasSize[0]*zoom/2)+'px'; this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
this.canvas.style.top = 48+canvasView.clientHeight/2-(canvasSize[1]*zoom/2)+'px'; this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
}, },
this.resize = function() { this.resize = function() {
let newWidth = (this.canvas.width*zoom)+'px'; let newWidth = (this.canvas.width*zoom)+'px';

View File

@ -1,27 +1,9 @@
function newPixel (width, height, palette) { function newPixel (width, height, palette) {
var main = new Canvas(width, height, canvas);
canvasSize = [width,height]; main.initialize();
var maxHorizontalZoom = Math.floor(window.innerWidth/canvasSize[0]*0.75);
var maxVerticalZoom = Math.floor(window.innerHeight/canvasSize[1]*0.75);
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
if (zoom < 1) zoom = 1;
//resize canvas
canvas.width = canvasSize[0];
canvas.height = canvasSize[1];
canvas.style.width = (canvas.width*zoom)+'px';
canvas.style.height = (canvas.height*zoom)+'px';
//unhide canvas
canvas.style.display = 'block';
//center canvas in window
canvas.style.left = 64+canvasView.clientWidth/2-(canvasSize[0]*zoom/2)+'px';
canvas.style.top = 48+canvasView.clientHeight/2-(canvasSize[1]*zoom/2)+'px';
canvasSize = main.canvasSize;
//remove current palette //remove current palette
colors = document.getElementsByClassName('color-button'); colors = document.getElementsByClassName('color-button');
while (colors.length > 0) { while (colors.length > 0) {

View File

@ -12,6 +12,7 @@ var prevEraserSize = 1;
var menuOpen = false; var menuOpen = false;
var dialogueOpen = false; var dialogueOpen = false;
var documentCreated = false; var documentCreated = false;
var layers =
// Checkerboard management // Checkerboard management
var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)'; var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';