mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7 from juliandescottes/fix-drawinglogic

Browse Source 
per pixel redraw
This commit is contained in:
Julian Descottes 2012-08-29 11:35:42 -07:00
commit c764976ed3
1 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
js/piskel.js
View File

@ -23,6 +23,7 @@
drawingAreaContainer, drawingAreaContainer,
drawingAreaCanvas, drawingAreaCanvas,
previewCanvas, previewCanvas,
paletteEl,
// States: // States:
isClicked = false, isClicked = false,
@ -30,7 +31,17 @@
activeFrameIndex = -1, activeFrameIndex = -1,
animIndex = 0, animIndex = 0,
penColor = DEFAULT_PEN_COLOR, penColor = DEFAULT_PEN_COLOR,
paletteColors = []; paletteColors = [],
//utility
_normalizeColor = function (color) {
if(color == undefined || color == TRANSPARENT_COLOR || color.indexOf("#") == 0) {
return color;
} else {
return "#" + color;
}
}
;
var piskel = { var piskel = {
@ -77,15 +88,11 @@
}, },
onPickerChange : function(evt) { onPickerChange : function(evt) {
penColor = this.colorPicker.value; penColor = _normalizeColor(this.colorPicker.value);
}, },
initPalette : function (color) { initPalette : function (color) {
var pixels = frameSheet.getAllPixels(); paletteEl = $('palette');
this.paletteEl = $('palette');
for (var i = 0 ; i < pixels.length ; i++) {
this.addColorToPalette(pixels[i]);
}
}, },
addColorToPalette : function (color) { addColorToPalette : function (color) {
@ -94,7 +101,7 @@
colorEl.setAttribute("data-color", color); colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color); colorEl.setAttribute("title", color);
colorEl.style.background = color; colorEl.style.background = color;
this.paletteEl.appendChild(colorEl); paletteEl.appendChild(colorEl);
paletteColors.push(color); paletteColors.push(color);
} }
}, },
@ -114,7 +121,7 @@
drawingAreaContainer.appendChild(drawingAreaCanvas); drawingAreaContainer.appendChild(drawingAreaCanvas);
var body = document.getElementsByTagName('body')[0]; var body = document.getElementsByTagName('body')[0];
body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(arguments[0])'); body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(event)');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)'); drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)'); drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
@ -309,36 +316,39 @@
}, },
drawAt : function (x, y, color) { drawAt : function (x, y, color) {
var pixelWidthIndex = (x - x%drawingCanvasDpi) / drawingCanvasDpi; var col = (x - x%drawingCanvasDpi) / drawingCanvasDpi;
var pixelHeightIndex = (y - y%drawingCanvasDpi) / drawingCanvasDpi; var row = (y - y%drawingCanvasDpi) / drawingCanvasDpi;
// Update model: // Update model:
var currentFrame = frameSheet.getFrameByIndex(this.getActiveFrameIndex()); var currentFrame = frameSheet.getFrameByIndex(this.getActiveFrameIndex());
// TODO: make a better accessor for pixel state update: // TODO: make a better accessor for pixel state update:
// TODO: Make pen color dynamic: // TODO: Make pen color dynamic:
currentFrame[pixelWidthIndex][pixelHeightIndex] = color; var color = _normalizeColor(color);
if (color != currentFrame[col][row]) {
currentFrame[col][row] = color;
this.drawPixelInCanvas(row, col, color, drawingAreaCanvas, drawingCanvasDpi);
}
},
// Update view: drawPixelInCanvas : function (row, col, color, canvas, dpi) {
// TODO: Create a per pixel update function for perf ? var context = canvas.getContext('2d');
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi); if(color == undefined || color == TRANSPARENT_COLOR) {
context.clearRect(col * dpi, row * dpi, dpi, dpi);
} else {
this.addColorToPalette(color);
context.fillStyle = color;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
}, },
// TODO: move that to a FrameRenderer (/w cache) ? // TODO: move that to a FrameRenderer (/w cache) ?
drawFrameToCanvas: function(frame, canvasElement, dpi) { drawFrameToCanvas: function(frame, canvasElement, dpi) {
var pixelColor, context = canvasElement.getContext('2d'); var color;
for(var col = 0, num_col = frame.length; col < num_col; col++) { for(var col = 0, num_col = frame.length; col < num_col; col++) {
for(var row = 0, num_row = frame[col].length; row < num_row; row++) { for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
pixelColor = frame[col][row]; color = _normalizeColor(frame[col][row]);
if(pixelColor == undefined || pixelColor == TRANSPARENT_COLOR) { this.drawPixelInCanvas(row, col, color, canvasElement, dpi);
context.clearRect(col * dpi, row * dpi, dpi, dpi);
} else {
if (pixelColor.indexOf("#") != 0)
pixelColor = "#" + pixelColor;
this.addColorToPalette(pixelColor);
context.fillStyle = pixelColor;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
} }
} }
}, },