File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
(function($) {
$(window).on('load', function() {
// resize event 호춣
// $( window ).resize(function() {
// fixCanvasForPPI(window.innerWidth, window.innerHeight);
// });
// Set globals
var painter = {
$canvas: $('#painterCanvas'),
color: 'blue light',
press: false,
last: new Image(),
hist: [],
undoHist: [],
clicks: 0,
start: false
};
// function fixCanvasForPPI(width, height) {
// $("#canvas").css({
// 'width': width.toString() + 'px',
// 'height': height.toString() + 'px'
// });
// }
function updateCanvasSize() {
var image = painter.$canvas.getCanvasImage('image/png');
painter.canvasW = screen.availWidth;
painter.canvasH = screen.availHeight;
painter.$canvas.prop({
width: painter.canvasW,
height: painter.canvasH
});
// painter.$canvas.detectPixelRatio();
//
// if (image.length > 10) {
//
// painter.$canvas.drawImage({
// source: image,
// x: 0, y: 0,
// width: painter.canvasW, height: painter.canvasH,
// fromCenter: false
// });
//
// }
}
var $$ = {
stroke: $('#stroke'),
strokeContainer: $('#stroke-container'),
box: $('#box'),
tools: $('#tools'),
clear: $('#clear'),
slider: $('#slider'),
colors: $('#colors'),
brush: $('#brush'),
path: $('#path'),
rect: $('#rect'),
ellipse: $('#ellipse'),
undo: $('#undo'),
redo: $('#redo'),
save: $('#save'),
init : $('#init')
};
var duration;
// Map standard mouse events to touch events
var mouseEventMap = {
'mousedown': 'touchstart',
'mouseup': 'touchend',
'mousemove': 'touchmove'
};
// Convert mouse event name to a corresponding touch event name (if possible)
function getTouchEventName(eventName) {
// Detect touch event support
if (window.ontouchstart !== undefined) {
if (mouseEventMap[eventName]) {
eventName = mouseEventMap[eventName];
}
}
return eventName;
}
painter.getTouchEventName = getTouchEventName;
function getPageCoords(event) {
if (event.originalEvent.changedTouches) {
return {
pageX: event.originalEvent.changedTouches[0].pageX,
pageY: event.originalEvent.changedTouches[0].pageY
};
} else {
return {
pageX: event.pageX,
pageY: event.pageY
};
}
}
painter.getPageCoords = getPageCoords;
// Clear canvas and set background
function clearCanvas() {
// context
var ctx = $("#painterCanvas")[0].getContext("2d");
// pixcel 정리
ctx.clearRect(0,0,$("#painterCanvas")[0].width, $("#painterCanvas")[0].height);
// history clear
painter.hist = [];
painter.undoHist = [];
}
painter.clearCanvas = clearCanvas;
function drawCanvasState(image) {
painter.$canvas.clearCanvas();
painter.$canvas.drawImage({
source: image,
x: 0, y: 0,
width: painter.canvasW, height: painter.canvasH,
fromCenter: false
});
}
// UPDATE STROKE
function updateStroke() {
$$.stroke.width(painter.stroke);
$$.stroke.height(painter.stroke);
// $$.stroke.css({
// marginLeft: ($$.box.width() - $$.stroke.width()) / 2,
// marginTop: ($$.box.height() - $$.stroke.height()) / 2
// });
if (painter.start === false) {
$$.stroke.css({backgroundColor: painter.color});
painter.start += 1;
} else if (painter.start === true) {
$$.stroke.stop().animate({backgroundColor: painter.color}, duration);
}
painter.start = true;
}
/*var colorMap = {
red: {
dark: '#a11',
medium: '#c33',
light: '#e55'
},
green: {
dark: '#4b1',
medium: '#6d2',
light: '#8f4'
},
blue: {
dark: '#14b',
medium: '#36d',
light: '#58f'
},
orange: {
dark: '#d51',
medium: '#f73',
light: '#f95'
},
yellow: {
dark: '#ed2',
medium: '#fe3',
light: '#ff5'
},
purple: {
dark: '#75d',
medium: '#96f',
light: '#b8f'
},
black: {
dark: '#000',
medium: '#999',
light: '#fff'
}
};*/
var colorMap = {
white: {
light: '#fff'
},
black: {
light: '#222'
},
red: {
light: '#FD4418'
},
blue: {
light: '#2F77FF'
},
sky: {
light: '#00ccff'
},
green: {
light: '#00D56A'
},
yellow: {
light: '#FFCE00'
}
};
var colors = ['black', 'red', 'yellow', 'green', 'blue', 'white'];
var shades = ['light'];
// ADD COLORS
function addColors() {
var color, c, s;
function addColor(color, shade) {
if (colorMap[color] && colorMap[color][shade]) {
$('<div class="color ' + color + ' ' + shade + '" />')
.css({
backgroundColor: colorMap[color][shade]
})
.appendTo('#colors');
}
}
for (s = 0; s < shades.length; s += 1) {
for (c = 0; c < colors.length; c += 1) {
color = colors[c];
addColor(color, shades[s]);
}
}
}
// APPLY CHOSEN COLOR
function getColor(swatch) {
var info = swatch.split(' ');
swatch = $('.' + info[0] + '.' + info[1]);
swatch.addClass('chosen');
painter.color = swatch.css('backgroundColor');
updateStroke();
}
// FILL SLIDER
function fillSlider(percent) {
var sliderH = $$.slider.height(),
filler = $$.slider.children('#filler');
filler.height(sliderH * (percent / 100));
}
// CHOSEN TOOL
$$.tools.on('click', '.tool', function() {
$$.tools.find('.chosen').removeClass('chosen');
$(this).addClass('chosen');
});
// CLEAR CANVAS BUTTON
$$.clear.on('click', function() {
painter.$canvas.trigger('mouseup');
painter.last.src = painter.$canvas[0].toDataURL('image/png');
painter.hist.push(painter.last.src);
clearCanvas();
painter.clicks = 0;
});
// SAVE PICTURE BUTTON
$$.save.on('click', function() {
var dataURL = painter.$canvas[0].toDataURL('image/png');
painter.$canvas.mouseup();
window.open(dataURL);
});
// UNDO BUTTON
$$.undo.on('click', function() {
painter.$canvas.mouseup();
if (painter.hist.length > 0) {
painter.clicks = 0;
painter.undoHist.push(painter.$canvas[0].toDataURL('image/png'));
var last = painter.hist.pop();
drawCanvasState(last);
}
});
$$.redo.on('click', function () {
painter.$canvas.mouseup();
if (painter.undoHist.length > 0) {
painter.clicks = 0;
var last = painter.undoHist.pop();
painter.hist.push(painter.$canvas[0].toDataURL('image/png'));
drawCanvasState(last);
}
});
// PAINT TOOL BUTTON
$$.brush.on('click', function() {
painter.$canvas.brushTool(painter);
});
// PATH TOOL BUTTON
$$.path.on('click', function() {
painter.last.src = painter.$canvas[0].toDataURL('image/png');
painter.$canvas.pathTool(painter);
});
// RECT TOOL BUTTON
$$.rect.on('click', function() {
painter.last.src = painter.$canvas[0].toDataURL('image/png');
painter.$canvas.rectTool(painter);
});
// ELLIPSE TOOL BUTTON
$$.ellipse.on('click', function() {
painter.last.src = painter.$canvas[0].toDataURL('image/png');
painter.$canvas.ellipseTool(painter);
});
// DEFAULT TOOL
$$.brush.click();
// CHOOSE COLOR
addColors();
getColor(painter.color);
$$.colors.on('click', '.color', function() {
var $color = $(this);
$('.color.chosen').removeClass('chosen');
getColor($color.prop('class').replace(/(color|chosen) /gi, ''));
$color.addClass('chosen');
painter.clicks = 0;
return false;
});
if( $$.slider.slider != undefined ){
// SLIDER
$$.slider.slider({
min: 1,
max: 40,
value: 33,
orientation: "vertical"
});
var startVal = $$.slider.slider('option', 'value');
fillSlider(startVal);
painter.stroke = 41 - Math.round(startVal);
updateStroke();
}
// SLIDE TO CHANGE STROKE
$$.slider.bind('slide', function(event, ui) {
var percent = ui.value;
painter.stroke = 41 - Math.round(percent);
updateStroke();
fillSlider(percent);
});
//CLEAR CANVAS BUTTON
$$.clear.on('click', function() {
painter.$canvas.trigger('mouseup');
painter.last.src = painter.$canvas[0].toDataURL('image/png');
painter.hist.push(painter.last.src);
clearCanvas();
painter.clicks = 0;
});
//INIT BRUSH BUTTON
$$.init.on('click', function() {
initBrushSize();
});
//init brush size
function initBrushSize() {
fillSlider(startVal);
painter.stroke = 41 - Math.round(startVal);
}
updateCanvasSize();
clearCanvas();
});
}(jQuery, {}));