108 lines
2.4 KiB
JavaScript
108 lines
2.4 KiB
JavaScript
//pencil
|
|
on('click','pencil-button', function(){
|
|
changeTool('pencil');
|
|
}, false);
|
|
|
|
//pencil bigger
|
|
on('click','pencil-bigger-button', function(){
|
|
brushSize++;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
//pencil smaller
|
|
on('click','pencil-smaller-button', function(){
|
|
if(brushSize > 1) brushSize--;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
//eraser
|
|
on('click','eraser-button', function(){
|
|
changeTool('eraser');
|
|
}, false);
|
|
|
|
//eraser bigger
|
|
on('click','eraser-bigger-button', function(){
|
|
eraserSize++;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
//eraser smaller
|
|
on('click','eraser-smaller-button', function(e){
|
|
if(eraserSize > 1) eraserSize--;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
// rectangle
|
|
on('click','rectangle-button', function(){
|
|
// If the user clicks twice on the button, they change the draw mode
|
|
if (currentTool == 'rectangle') {
|
|
if (drawMode == 'empty') {
|
|
drawMode = 'fill';
|
|
setRectToolSvg();
|
|
}
|
|
else {
|
|
drawMode = 'empty';
|
|
setRectToolSvg();
|
|
}
|
|
}
|
|
else {
|
|
changeTool('rectangle');
|
|
}
|
|
}, false);
|
|
|
|
// rectangle bigger
|
|
on('click','rectangle-bigger-button', function(){
|
|
rectangleSize++;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
// rectangle smaller
|
|
on('click','rectangle-smaller-button', function(e){
|
|
if(rectangleSize > 1) rectangleSize--;
|
|
updateCursor();
|
|
}, false);
|
|
|
|
//fill
|
|
on('click','fill-button', function(){
|
|
changeTool('fill');
|
|
}, false);
|
|
|
|
//pan
|
|
on('click','pan-button', function(){
|
|
changeTool('pan');
|
|
}, false);
|
|
|
|
//eyedropper
|
|
on('click','eyedropper-button', function(){
|
|
changeTool('eyedropper');
|
|
}, false);
|
|
|
|
//zoom tool button
|
|
on('click','zoom-button', function(){
|
|
changeTool('zoom');
|
|
}, false);
|
|
|
|
//zoom in button
|
|
on('click','zoom-in-button', function(){
|
|
//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
|
|
changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
|
|
|
|
for (let i=1; i<layers.length; i++) {
|
|
layers[i].copyData(layers[0]);
|
|
}
|
|
}, false);
|
|
|
|
//zoom out button
|
|
on('click','zoom-out-button', function(){
|
|
changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
|
|
|
|
for (let i=1; i<layers.length; i++) {
|
|
layers[i].copyData(layers[0]);
|
|
}
|
|
}, false);
|
|
|
|
//rectangular selection button
|
|
on('click', 'rectselect-button', function(){
|
|
changeTool('rectselect');
|
|
}, false);
|