mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Implemented eraser tool. Must move and resize layers at the same time.
Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
parent
42a8ce3c4a
commit
a9d380ec1d
@ -21,9 +21,9 @@ Suggestions / Planned features:
|
|||||||
|
|
||||||
- Selections
|
- Selections
|
||||||
- New selection tool
|
- New selection tool
|
||||||
- New canvas layer above the drawing layer
|
- New currentLayer.canvas layer above the drawing layer
|
||||||
- Move when click and drag
|
- Move when click and drag
|
||||||
- Merge with canvas when click outside
|
- Merge with currentLayer.canvas when click outside
|
||||||
|
|
||||||
- Copy/paste
|
- Copy/paste
|
||||||
- Add as selection
|
- Add as selection
|
||||||
@ -35,7 +35,7 @@ Suggestions / Planned features:
|
|||||||
|
|
||||||
- Palette option remove unused colors
|
- Palette option remove unused colors
|
||||||
- Pixel Grid
|
- Pixel Grid
|
||||||
- Another canvas
|
- Another currentLayer.canvas
|
||||||
- Must be rescaled each zoom
|
- Must be rescaled each zoom
|
||||||
|
|
||||||
- Possibly add collaborate function using together.js
|
- Possibly add collaborate function using together.js
|
||||||
|
@ -54,11 +54,11 @@ canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#checkerboard {
|
#checkerboard {
|
||||||
z-index:1000;
|
z-index:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pixel-canvas {
|
#pixel-canvas {
|
||||||
z-index:1;
|
z-index:2;
|
||||||
background:transparent;
|
background:transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
function Canvas(width, height, canvas) {
|
function Canvas(width, height, canvas) {
|
||||||
this.canvasSize = [width, height],
|
this.canvasSize = [width, height],
|
||||||
this.canvas = canvas,
|
this.canvas = canvas,
|
||||||
|
this.context = canvas.getContext("2d"),
|
||||||
this.initialize = function() {
|
this.initialize = function() {
|
||||||
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
|
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
|
||||||
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
|
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
|
||||||
|
@ -6,6 +6,8 @@ var nSquaresFilled = 0;
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
function fillCheckerboard() {
|
function fillCheckerboard() {
|
||||||
|
var context = checkerBoard.context;
|
||||||
|
|
||||||
for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
|
for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
|
||||||
nSquaresFilled = 0;
|
nSquaresFilled = 0;
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@ function clickedColor (e){
|
|||||||
if (selectedColor) selectedColor.classList.remove("selected");
|
if (selectedColor) selectedColor.classList.remove("selected");
|
||||||
|
|
||||||
//set current color
|
//set current color
|
||||||
context.fillStyle = this.style.backgroundColor;
|
currentLayer.context.fillStyle = this.style.backgroundColor;
|
||||||
|
|
||||||
//make color selected
|
//make color selected
|
||||||
e.target.parentElement.classList.add('selected');
|
e.target.parentElement.classList.add('selected');
|
||||||
|
@ -36,10 +36,10 @@ function createColorPalette(selectedPalette, fillBackground) {
|
|||||||
|
|
||||||
//fill bg with lightest color
|
//fill bg with lightest color
|
||||||
if (fillBackground) {
|
if (fillBackground) {
|
||||||
context.fillStyle = lightestColor;
|
currentLayer.context.fillStyle = lightestColor;
|
||||||
context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
//set as current color
|
//set as current color
|
||||||
context.fillStyle = darkestColor;
|
currentLayer.context.fillStyle = darkestColor;
|
||||||
}
|
}
|
@ -73,7 +73,7 @@ function deleteColor (color) {
|
|||||||
|
|
||||||
//set current color TO LIGHTEST COLOR
|
//set current color TO LIGHTEST COLOR
|
||||||
lightestColor[1].parentElement.classList.add('selected');
|
lightestColor[1].parentElement.classList.add('selected');
|
||||||
context.fillStyle = '#'+lightestColor[1].jscolor.toString();
|
currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
//delete the element
|
//delete the element
|
||||||
|
@ -10,9 +10,9 @@ function line(x0,y0,x1,y1) {
|
|||||||
while (true) {
|
while (true) {
|
||||||
//set pixel
|
//set pixel
|
||||||
if (currentTool == 'pencil') {
|
if (currentTool == 'pencil') {
|
||||||
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||||
} else if (currentTool == 'eraser') {
|
} else if (currentTool == 'eraser') {
|
||||||
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), eraserSize, eraserSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
//if we've reached the end goal, exit the loop
|
//if we've reached the end goal, exit the loop
|
||||||
|
@ -5,19 +5,19 @@ const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
|
|||||||
|
|
||||||
//prototype for undoing canvas changes
|
//prototype for undoing canvas changes
|
||||||
function HistoryStateEditCanvas () {
|
function HistoryStateEditCanvas () {
|
||||||
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
|
|
||||||
this.undo = function () {
|
this.undo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
this.canvas = currentCanvas;
|
this.canvas = currentCanvas;
|
||||||
redoStates.push(this);
|
redoStates.push(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.redo = function () {
|
this.redo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
this.canvas = currentCanvas;
|
this.canvas = currentCanvas;
|
||||||
undoStates.push(this);
|
undoStates.push(this);
|
||||||
@ -48,11 +48,11 @@ function HistoryStateAddColor (colorValue) {
|
|||||||
//prototype for undoing deleted colors
|
//prototype for undoing deleted colors
|
||||||
function HistoryStateDeleteColor (colorValue) {
|
function HistoryStateDeleteColor (colorValue) {
|
||||||
this.colorValue = colorValue;
|
this.colorValue = colorValue;
|
||||||
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
|
|
||||||
this.undo = function () {
|
this.undo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
addColor(this.colorValue);
|
addColor(this.colorValue);
|
||||||
|
|
||||||
@ -61,8 +61,8 @@ function HistoryStateDeleteColor (colorValue) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.redo = function () {
|
this.redo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
deleteColor(this.colorValue);
|
deleteColor(this.colorValue);
|
||||||
|
|
||||||
@ -78,11 +78,11 @@ function HistoryStateDeleteColor (colorValue) {
|
|||||||
function HistoryStateEditColor (newColorValue, oldColorValue) {
|
function HistoryStateEditColor (newColorValue, oldColorValue) {
|
||||||
this.newColorValue = newColorValue;
|
this.newColorValue = newColorValue;
|
||||||
this.oldColorValue = oldColorValue;
|
this.oldColorValue = oldColorValue;
|
||||||
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
|
|
||||||
this.undo = function () {
|
this.undo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
//find new color in palette and change it back to old color
|
//find new color in palette and change it back to old color
|
||||||
var colors = document.getElementsByClassName('color-button');
|
var colors = document.getElementsByClassName('color-button');
|
||||||
@ -99,8 +99,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.redo = function () {
|
this.redo = function () {
|
||||||
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
context.putImageData(this.canvas, 0, 0);
|
currentLayer.context.putImageData(this.canvas, 0, 0);
|
||||||
|
|
||||||
//find old color in palette and change it back to new color
|
//find old color in palette and change it back to new color
|
||||||
var colors = document.getElementsByClassName('color-button');
|
var colors = document.getElementsByClassName('color-button');
|
||||||
|
@ -547,7 +547,7 @@ var jsc = {
|
|||||||
//console.log(e.target,'=====================================')
|
//console.log(e.target,'=====================================')
|
||||||
//if they clicked on the delete button [lospec]
|
//if they clicked on the delete button [lospec]
|
||||||
if (e.target.className == 'delete-color-button') {
|
if (e.target.className == 'delete-color-button') {
|
||||||
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
||||||
new HistoryStateDeleteColor(jsc.picker.owner.toString());
|
new HistoryStateDeleteColor(jsc.picker.owner.toString());
|
||||||
|
|
||||||
deleteColor(jsc.picker.owner.styleElement);
|
deleteColor(jsc.picker.owner.styleElement);
|
||||||
@ -784,15 +784,15 @@ var jsc = {
|
|||||||
// Canvas implementation for modern browsers
|
// Canvas implementation for modern browsers
|
||||||
|
|
||||||
var canvas = document.createElement('canvas');
|
var canvas = document.createElement('canvas');
|
||||||
var ctx = canvas.getContext('2d');
|
var ctx = currentLayer.canvas.getContext('2d');
|
||||||
|
|
||||||
var drawFunc = function (width, height, type) {
|
var drawFunc = function (width, height, type) {
|
||||||
canvas.width = width;
|
currentLayer.canvas.width = width;
|
||||||
canvas.height = height;
|
currentLayer.canvas.height = height;
|
||||||
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.clearRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
|
||||||
|
|
||||||
var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
var hGrad = ctx.createLinearGradient(0, 0, currentLayer.canvas.width, 0);
|
||||||
hGrad.addColorStop(0 / 6, '#F00');
|
hGrad.addColorStop(0 / 6, '#F00');
|
||||||
hGrad.addColorStop(1 / 6, '#FF0');
|
hGrad.addColorStop(1 / 6, '#FF0');
|
||||||
hGrad.addColorStop(2 / 6, '#0F0');
|
hGrad.addColorStop(2 / 6, '#0F0');
|
||||||
@ -802,9 +802,9 @@ var jsc = {
|
|||||||
hGrad.addColorStop(6 / 6, '#F00');
|
hGrad.addColorStop(6 / 6, '#F00');
|
||||||
|
|
||||||
ctx.fillStyle = hGrad;
|
ctx.fillStyle = hGrad;
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
ctx.fillRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
|
||||||
|
|
||||||
var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
var vGrad = ctx.createLinearGradient(0, 0, 0, currentLayer.canvas.height);
|
||||||
switch (type.toLowerCase()) {
|
switch (type.toLowerCase()) {
|
||||||
case 's':
|
case 's':
|
||||||
vGrad.addColorStop(0, 'rgba(255,255,255,0)');
|
vGrad.addColorStop(0, 'rgba(255,255,255,0)');
|
||||||
@ -816,7 +816,7 @@ var jsc = {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
ctx.fillStyle = vGrad;
|
ctx.fillStyle = vGrad;
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
ctx.fillRect(0, 0, currentLayer.canvas.width, canvas.height);
|
||||||
};
|
};
|
||||||
|
|
||||||
paletteObj.elm = canvas;
|
paletteObj.elm = canvas;
|
||||||
|
@ -15,10 +15,10 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
|
|||||||
newPixel(this.width, this.height, []);
|
newPixel(this.width, this.height, []);
|
||||||
|
|
||||||
//draw the image onto the canvas
|
//draw the image onto the canvas
|
||||||
context.drawImage(img, 0, 0);
|
currentLayer.context.drawImage(img, 0, 0);
|
||||||
|
|
||||||
var colorPalette = {};
|
var colorPalette = {};
|
||||||
var imagePixelData = context.getImageData(0,0,this.width, this.height).data;
|
var imagePixelData = currentLayer.context.getImageData(0,0,this.width, this.height).data;
|
||||||
|
|
||||||
var imagePixelDataLength = imagePixelData.length;
|
var imagePixelDataLength = imagePixelData.length;
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
|
|||||||
currentTool = 'pan';
|
currentTool = 'pan';
|
||||||
else if (mouseEvent.altKey)
|
else if (mouseEvent.altKey)
|
||||||
currentTool = 'eyedropper';
|
currentTool = 'eyedropper';
|
||||||
else if (mouseEvent.target == canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
|
else if (mouseEvent.target == currentLayer.canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
|
||||||
new HistoryStateEditCanvas();
|
new HistoryStateEditCanvas();
|
||||||
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
||||||
|
|
||||||
@ -31,7 +31,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
|
|||||||
}
|
}
|
||||||
// TODO add eraser resize for scroll wheel
|
// TODO add eraser resize for scroll wheel
|
||||||
|
|
||||||
if (currentTool == 'eyedropper' && mouseEvent.target == canvas)
|
if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
|
||||||
eyedropperPreview.style.display = 'block';
|
eyedropperPreview.style.display = 'block';
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
@ -46,7 +46,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
|
|||||||
|
|
||||||
if (!documentCreated || dialogueOpen) return;
|
if (!documentCreated || dialogueOpen) return;
|
||||||
|
|
||||||
if (currentTool == 'eyedropper' && mouseEvent.target == canvas) {
|
if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas) {
|
||||||
var cursorLocation = getCursorPosition(mouseEvent);
|
var cursorLocation = getCursorPosition(mouseEvent);
|
||||||
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
|
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
|
||||||
var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
|
var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
|
||||||
@ -78,10 +78,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
else if (currentTool == 'fill' && mouseEvent.target == canvas) {
|
else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
|
||||||
console.log('filling')
|
console.log('filling')
|
||||||
//if you clicked on anything but the canvas, do nothing
|
//if you clicked on anything but the canvas, do nothing
|
||||||
if (!mouseEvent.target == canvas) return;
|
if (!mouseEvent.target == currentLayer.canvas) return;
|
||||||
|
|
||||||
//get cursor postion
|
//get cursor postion
|
||||||
var cursorLocation = getCursorPosition(mouseEvent);
|
var cursorLocation = getCursorPosition(mouseEvent);
|
||||||
@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
|
|||||||
//fill starting at the location
|
//fill starting at the location
|
||||||
fill(cursorLocation);
|
fill(cursorLocation);
|
||||||
}
|
}
|
||||||
else if (currentTool == 'zoom' && mouseEvent.target == canvas) {
|
else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
|
||||||
if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
|
if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
|
||||||
else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
|
else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
|
||||||
}
|
}
|
||||||
@ -121,18 +121,18 @@ function draw (mouseEvent) {
|
|||||||
if (currentTool == 'pencil') {
|
if (currentTool == 'pencil') {
|
||||||
|
|
||||||
//move the brush preview
|
//move the brush preview
|
||||||
brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
|
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
|
||||||
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
||||||
|
|
||||||
//hide brush preview outside of canvas / canvas view
|
//hide brush preview outside of canvas / canvas view
|
||||||
if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
|
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
|
||||||
brushPreview.style.visibility = 'visible';
|
brushPreview.style.visibility = 'visible';
|
||||||
else
|
else
|
||||||
brushPreview.style.visibility = 'hidden';
|
brushPreview.style.visibility = 'hidden';
|
||||||
|
|
||||||
//draw line to current pixel
|
//draw line to current pixel
|
||||||
if (dragging) {
|
if (dragging) {
|
||||||
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
|
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
|
||||||
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
|
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
|
||||||
lastPos = cursorLocation;
|
lastPos = cursorLocation;
|
||||||
}
|
}
|
||||||
@ -153,14 +153,14 @@ function draw (mouseEvent) {
|
|||||||
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
||||||
|
|
||||||
//hide brush preview outside of canvas / canvas view
|
//hide brush preview outside of canvas / canvas view
|
||||||
if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
|
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
|
||||||
brushPreview.style.visibility = 'visible';
|
brushPreview.style.visibility = 'visible';
|
||||||
else
|
else
|
||||||
brushPreview.style.visibility = 'hidden';
|
brushPreview.style.visibility = 'hidden';
|
||||||
|
|
||||||
//draw line to current pixel
|
//draw line to current pixel
|
||||||
if (dragging) {
|
if (dragging) {
|
||||||
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
|
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
|
||||||
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
|
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
|
||||||
lastPos = cursorLocation;
|
lastPos = cursorLocation;
|
||||||
}
|
}
|
||||||
@ -169,30 +169,30 @@ function draw (mouseEvent) {
|
|||||||
else if (currentTool == 'pan' && dragging) {
|
else if (currentTool == 'pan' && dragging) {
|
||||||
|
|
||||||
|
|
||||||
setCanvasOffset(canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
|
setCanvasOffset(currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
|
||||||
/*
|
/*
|
||||||
if (
|
if (
|
||||||
//right
|
//right
|
||||||
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - canvasSize[0]*zoom*0.25 - 48 &&
|
currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - currentLayer.canvasSize[0]*zoom*0.25 - 48 &&
|
||||||
//left
|
//left
|
||||||
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
|
currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
|
||||||
canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
|
canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
|
||||||
|
|
||||||
if (
|
if (
|
||||||
//bottom
|
//bottom
|
||||||
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
|
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
|
||||||
//top
|
//top
|
||||||
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
|
currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
|
||||||
canvas.style.top = canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
|
currentLayer.canvas.style.top = currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == canvas) {
|
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
|
||||||
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
|
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
|
||||||
eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
|
eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
|
||||||
eyedropperPreview.style.display = 'block';
|
eyedropperPreview.style.display = 'block';
|
||||||
|
|
||||||
eyedropperPreview.style.left = cursorLocation[0] + canvas.offsetLeft - 30 + 'px';
|
eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
|
||||||
eyedropperPreview.style.top = cursorLocation[1] + canvas.offsetTop - 30 + 'px';
|
eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px';
|
||||||
|
|
||||||
var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
|
var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
|
||||||
|
|
||||||
@ -213,8 +213,8 @@ function draw (mouseEvent) {
|
|||||||
brushSize = Math.max(1,newBrushSize);
|
brushSize = Math.max(1,newBrushSize);
|
||||||
|
|
||||||
//fix offset so the cursor stays centered
|
//fix offset so the cursor stays centered
|
||||||
brushPreview.style.left = lastPos[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
|
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
|
||||||
brushPreview.style.top = lastPos[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
|
||||||
|
|
||||||
updateCursor();
|
updateCursor();
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
|
|
||||||
function newPixel (width, height, palette) {
|
function newPixel (width, height, palette) {
|
||||||
var main = new Canvas(width, height, canvas);
|
currentLayer = new Canvas(width, height, canvas);
|
||||||
main.initialize();
|
currentLayer.initialize();
|
||||||
|
|
||||||
canvasSize = main.canvasSize;
|
checkerBoard = new Canvas(width, height, checkerBoard);
|
||||||
|
checkerBoard.initialize();
|
||||||
|
|
||||||
|
canvasSize = currentLayer.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) {
|
||||||
@ -40,14 +43,14 @@ function newPixel (width, height, palette) {
|
|||||||
//fill background of canvas with bg color
|
//fill background of canvas with bg color
|
||||||
fillCheckerboard();
|
fillCheckerboard();
|
||||||
/*
|
/*
|
||||||
context.fillStyle = '#'+defaultBackgroundColor;
|
currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
|
||||||
context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
|
|
||||||
console.log('#'+defaultBackgroundColor)
|
console.log('#'+defaultBackgroundColor)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
//set current drawing color as foreground color
|
//set current drawing color as foreground color
|
||||||
context.fillStyle = '#'+defaultForegroundColor;
|
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
|
||||||
selectedPalette = 'none';
|
selectedPalette = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ function replaceAllOfColor (oldColor, newColor) {
|
|||||||
if (typeof newColor === 'string') newColor = hexToRgb(newColor);
|
if (typeof newColor === 'string') newColor = hexToRgb(newColor);
|
||||||
|
|
||||||
//create temporary image from canvas to search through
|
//create temporary image from canvas to search through
|
||||||
var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
|
||||||
|
|
||||||
//loop through all pixels
|
//loop through all pixels
|
||||||
for (var i=0;i<tempImage.data.length;i+=4) {
|
for (var i=0;i<tempImage.data.length;i+=4) {
|
||||||
@ -21,5 +21,5 @@ function replaceAllOfColor (oldColor, newColor) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//put temp image back onto canvas
|
//put temp image back onto canvas
|
||||||
context.putImageData(tempImage,0,0);
|
currentLayer.context.putImageData(tempImage,0,0);
|
||||||
}
|
}
|
@ -12,7 +12,7 @@ function updateCursor () {
|
|||||||
brushPreview.style.display = 'block';
|
brushPreview.style.display = 'block';
|
||||||
brushPreview.style.width = eraserSize * zoom + 'px';
|
brushPreview.style.width = eraserSize * zoom + 'px';
|
||||||
brushPreview.style.height = eraserSize * zoom + 'px';
|
brushPreview.style.height = eraserSize * zoom + 'px';
|
||||||
context.fillStyle = 'rgba(255, 0, 0, 0)';
|
currentLayer.context.fillStyle = 'rgba(255, 0, 0, 0)';
|
||||||
} else
|
} else
|
||||||
brushPreview.style.display = 'none';
|
brushPreview.style.display = 'none';
|
||||||
|
|
||||||
|
@ -12,13 +12,12 @@ 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)';
|
||||||
var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
|
var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
|
||||||
var checkerBoardSquareSize = 16;
|
var checkerBoardSquareSize = 16;
|
||||||
//var checkerBoard = document.getElementById("checkerboard").getContext("2d");
|
var checkerBoard = document.getElementById("checkerboard");
|
||||||
|
|
||||||
//common elements
|
//common elements
|
||||||
var brushPreview = document.getElementById("brush-preview");
|
var brushPreview = document.getElementById("brush-preview");
|
||||||
@ -32,3 +31,9 @@ var popUpContainer = document.getElementById("pop-up-container");
|
|||||||
var canvas = document.getElementById("pixel-canvas");
|
var canvas = document.getElementById("pixel-canvas");
|
||||||
var context = canvas.getContext("2d");
|
var context = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// Layers
|
||||||
|
var layers = [];
|
||||||
|
var currentLayer;
|
||||||
|
|
||||||
|
//TODO all layers must be moved and resized at the same time
|
||||||
|
|
||||||
|
@ -99,6 +99,7 @@
|
|||||||
|
|
||||||
<div id="canvas-view">
|
<div id="canvas-view">
|
||||||
<canvas id="pixel-canvas"></canvas>
|
<canvas id="pixel-canvas"></canvas>
|
||||||
|
<canvas id="checkerboard"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div id="canvas-view-shadow"></div>
|
<div id="canvas-view-shadow"></div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user