eraser
This commit is contained in:
parent
02ed7f9f08
commit
7ee22151c6
@ -145,13 +145,14 @@ function save() {
|
||||
}).on('mousemove', function(e) {
|
||||
if( $(this).attr('data-moving') ) {
|
||||
var x = parseInt(e.pageX - sliderLeft - 15);
|
||||
var progress = $(this).parent().children().first();
|
||||
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
|
||||
var progress = $c.find('progress');
|
||||
var max = +progress.attr('max');
|
||||
var min = +progress.attr('min');
|
||||
if( x <= max && x >= min ) {
|
||||
$(this).css('left', x+'%');
|
||||
$(this).parent().find('progress').attr('value', x);
|
||||
var key = $(this).parents('div[role="slider"]').attr('class');
|
||||
$c.find('button').css('left', x+'%');
|
||||
progress.attr('value', x);
|
||||
var key = $c.attr('class');
|
||||
settings[key] = x;
|
||||
$('#'+ key +' span').html(x);
|
||||
}
|
||||
|
@ -34,6 +34,8 @@ function line(x1, y1, x2, y2, opts, overlay) {
|
||||
var c = window.c;
|
||||
if( overlay ) var c = window.o;
|
||||
c.beginPath();
|
||||
if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
|
||||
else c.globalCompositeOperation = opts.composite || settings.composite;
|
||||
c.lineCap = opts.lineCap || settings.lineCap;
|
||||
c.lineJoin = opts.lineJoin || settings.lineJoin;
|
||||
c.strokeStyle = opts.color || settings.color;
|
||||
@ -129,6 +131,9 @@ function drawPoint(x,y) {
|
||||
var capture = points[points.length-1];
|
||||
|
||||
switch(capture.type) {
|
||||
case 'eraser': {
|
||||
capture.type = 'pen';
|
||||
}
|
||||
case 'pen': {
|
||||
line(capture.x, capture.y, x, y);
|
||||
|
||||
@ -182,20 +187,6 @@ function drawPoint(x,y) {
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'eraser': {
|
||||
c.globalCompositeOperation = 'destination-out';
|
||||
line(capture.x, capture.y, x, y);
|
||||
|
||||
var current = {
|
||||
x : x,
|
||||
y : y,
|
||||
start : capture.start,
|
||||
type : capture.type
|
||||
}
|
||||
|
||||
points.push(current);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,8 @@ $(document).ready(function() {
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
furLength: 5,
|
||||
connectTelorance: 40
|
||||
connectTelorance: 40,
|
||||
composite: 'source-over'
|
||||
};
|
||||
window.points = [];
|
||||
window.$c = $('canvas');
|
||||
|
@ -151,13 +151,14 @@ function save() {
|
||||
}).on('touchmove', function(e) {
|
||||
if( $(this).attr('data-moving') ) {
|
||||
var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
|
||||
var progress = $(this).parent().children().first();
|
||||
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
|
||||
var progress = $c.find('progress');
|
||||
var max = +progress.attr('max');
|
||||
var min = +progress.attr('min');
|
||||
if( x <= max && x >= min ) {
|
||||
$(this).css('left', x+'%');
|
||||
$(this).parent().find('progress').attr('value', x);
|
||||
var key = $(this).parents('div[role="slider"]').attr('class');
|
||||
$c.find('button').css('left', x+'%');
|
||||
progress.attr('value', x);
|
||||
var key = $c.attr('class');
|
||||
settings[key] = x;
|
||||
$('#'+ key +' span').html(x);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user