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