Shapes
This commit is contained in:
Mahdi Dibaiee
parent
bb9f4413d1
commit
c65a36f109
19
Ideas
Normal file
19
Ideas
Normal file
@ -0,0 +1,19 @@
|
||||
Current
|
||||
=======
|
||||
Eraser
|
||||
Shapes
|
||||
Fill
|
||||
Pen
|
||||
Chalk
|
||||
Board Size
|
||||
Import Images
|
||||
|
||||
Server
|
||||
======
|
||||
Board Themes
|
||||
Share
|
||||
|
||||
Later
|
||||
=====
|
||||
KB Shortcuts
|
||||
Zoom
|
||||
0
Mobile/js/functions.css
Normal file
0
Mobile/js/functions.css
Normal file
@ -3,7 +3,7 @@
|
||||
|
||||
function sizeAndPos() {
|
||||
|
||||
var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height());
|
||||
var data = c.getImageData(0,0, $c.width(), $c.height());
|
||||
var w = $(window).width(),
|
||||
h = $(window).height() - 53;
|
||||
$c.attr('width', w * window.devicePixelRatio);
|
||||
@ -16,10 +16,11 @@ function sizeAndPos() {
|
||||
c.putImageData(data, 0, 0);
|
||||
}
|
||||
|
||||
function relative(x,y) {
|
||||
function relative(x,y, el) {
|
||||
var el = el || $c[0];
|
||||
return {
|
||||
x : x*window.devicePixelRatio,
|
||||
y : (y - 53) * window.devicePixelRatio
|
||||
x : x*window.devicePixelRatio - el.offset().left,
|
||||
y : (y - 53) * window.devicePixelRatio - el.offset().top
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,6 +48,38 @@ function draw(x1, y1, x2, y2, opts, overlay) {
|
||||
if( opts.fill ) c.fill();
|
||||
}
|
||||
|
||||
function shape(opts, overlay) {
|
||||
if(overlay) var c = window.o;
|
||||
else var c = window.c;
|
||||
c.beginPath();
|
||||
c.fillStyle = opts.color || settings.color;
|
||||
switch(opts.type) {
|
||||
|
||||
case 'circle': {
|
||||
c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
|
||||
break;
|
||||
}
|
||||
case 'rectangle': {
|
||||
c.rect(opts.x, opts.y, opts.width, opts.height);
|
||||
break;
|
||||
}
|
||||
case 'square': {
|
||||
c.rect(opts.x, opts.y, opts.width, opts.width);
|
||||
break;
|
||||
}
|
||||
case 'triangle': {
|
||||
c.fillStyle = opts
|
||||
c.moveTo(opts.x1, opts.y1);
|
||||
c.lineTo(opts.x2, opts.y2);
|
||||
c.lineTo(opts.x3, opts.y3);
|
||||
c.lineTo(opts.x1, opts.y1);
|
||||
}
|
||||
|
||||
}
|
||||
c.fill();
|
||||
}
|
||||
|
||||
|
||||
function undo() {
|
||||
var history = window.points.history;
|
||||
if( history.last > 1 ) {
|
||||
@ -106,6 +139,7 @@ function startPoint(x, y) {
|
||||
start : old.start || {x: x, y: y},
|
||||
type : settings.type
|
||||
}
|
||||
// Line
|
||||
if( old.type !== 'line' && current.type == 'line' ) {
|
||||
window.o.beginPath();
|
||||
window.o.fillStyle = 'red';
|
||||
@ -121,6 +155,12 @@ function startPoint(x, y) {
|
||||
draw(old.x, old.y, x, y);
|
||||
}
|
||||
|
||||
// Shapes
|
||||
|
||||
if( old.type !== 'shape' && current.type == 'shape' ) {
|
||||
settings.shape.
|
||||
}
|
||||
|
||||
var thresholds = window.mobile ? [10, 5] : [5, 2];
|
||||
if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
|
||||
window.active = false;
|
||||
|
||||
@ -71,6 +71,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='shape hidden'>
|
||||
<p class='icon-settings'>Shape</p>
|
||||
<button id='setshape'>Type<span>Circle</span></button>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='bottom'>
|
||||
<button id='clear' class='icon-clear'>Clear</button>
|
||||
@ -85,10 +92,11 @@
|
||||
<section class='scrollable'>
|
||||
<h1>Brush Type</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true'><label><span>Sketch</span></label></li>
|
||||
<li><label><span>Fur</span></label></li>
|
||||
<li><label><span>Pen</span></label></li>
|
||||
<li><label><span>Line</span></label></li>
|
||||
<li aria-selected='true' data-target='sketch'><label><span>Sketch</span></label></li>
|
||||
<li data-target='fur'><label><span>Fur</span></label></li>
|
||||
<li data-target='pencil'><label><span>Pencil</span></label></li>
|
||||
<li data-target='line'><label><span>Line</span></label></li>
|
||||
<li data-target='shape'><label><span>Shape</span></label></li>
|
||||
<!--<li><label><span>Eraser</span></label></li>-->
|
||||
</ol>
|
||||
</section>
|
||||
@ -125,6 +133,22 @@
|
||||
</menu>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='shape' class='hidden single'>
|
||||
<section class='scrollable'>
|
||||
<h1>Shape Type</h1>
|
||||
<ol role='listbox'>
|
||||
<li aria-selected='true' data-target='shape'><label><span>Circle</span></label></li>
|
||||
<li data-target='shape'><label><span>Rectangle</span></label></li>
|
||||
<li data-target='shape'><label><span>Square</span></label></li>
|
||||
<li data-target='shape'><label><span>Triangle</span></label></li>
|
||||
<li data-target='shape'><label><span>Custom</span></label></li>
|
||||
</ol>
|
||||
<menu>
|
||||
<button class='affirmative full'>Cancel</button>
|
||||
</menu>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
|
||||
<section class='scrollable'>
|
||||
<h1>Save</h1>
|
||||
|
||||
@ -87,12 +87,13 @@ $(window).resize(sizeAndPos);
|
||||
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
||||
$(this).attr('aria-selected', 'true');
|
||||
var key = $(this).parents('form').attr('id'),
|
||||
value = $(this).find('label span').html().toLowerCase();
|
||||
value = $(this).find('label span').html().toLowerCase(),
|
||||
target = $(this).attr('data-target');
|
||||
window.settings[key] = value;
|
||||
|
||||
$('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
|
||||
$('#menu div.options > div').addClass('hidden');
|
||||
$('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden');
|
||||
$('#menu div.options > .general, #menu div.options > .'+target).removeClass('hidden');
|
||||
|
||||
$(this).parents('form').addClass('hidden');
|
||||
})
|
||||
@ -184,8 +185,10 @@ $(window).resize(sizeAndPos);
|
||||
// Bottom
|
||||
|
||||
$('#clear').click(function() {
|
||||
c.clearRect(0, 0, width(), height());
|
||||
c.clear();
|
||||
var h = window.points.history;
|
||||
window.points = [];
|
||||
window.points.history = h;
|
||||
if(window.points.history.last < window.points.history.length-1) {
|
||||
window.points.history.splice(window.points.history.last+1);
|
||||
}
|
||||
|
||||
0
Web/js/functions.css
Normal file
0
Web/js/functions.css
Normal file
@ -3,7 +3,7 @@
|
||||
|
||||
function sizeAndPos() {
|
||||
|
||||
var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height());
|
||||
var data = c.getImageData(0,0, $c.width(), $c.height());
|
||||
var w = $(window).width(),
|
||||
h = $(window).height() - 53;
|
||||
$c.attr('width', w * window.devicePixelRatio);
|
||||
@ -12,14 +12,16 @@ function sizeAndPos() {
|
||||
'width' : w,
|
||||
'height' : h
|
||||
});
|
||||
c.clearRect(0,0, width(), height());
|
||||
c.clear();
|
||||
c.putImageData(data, 0, 0);
|
||||
}
|
||||
|
||||
function relative(x,y) {
|
||||
function relative(x,y, el) {
|
||||
var el = el || $c,
|
||||
offset = el.offset();
|
||||
return {
|
||||
x : x*window.devicePixelRatio,
|
||||
y : (y - 53) * window.devicePixelRatio
|
||||
x : (x - offset.left) *window.devicePixelRatio,
|
||||
y : (y - offset.top) * window.devicePixelRatio
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,8 +33,8 @@ function threshold(x1, y1, x2, y2, threshold) {
|
||||
|
||||
function draw(x1, y1, x2, y2, opts, overlay) {
|
||||
opts = opts || {};
|
||||
var c = window.c;
|
||||
if( overlay ) var c = window.o;
|
||||
else var c = window.c;
|
||||
c.beginPath();
|
||||
if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
|
||||
else c.globalCompositeOperation = opts.composite || settings.composite;
|
||||
@ -47,6 +49,42 @@ function draw(x1, y1, x2, y2, opts, overlay) {
|
||||
if( opts.fill ) c.fill();
|
||||
}
|
||||
|
||||
function shape(opts, overlay) {
|
||||
if(overlay || opts.type == 'mark') var c = window.o;
|
||||
else var c = window.c;
|
||||
c.beginPath();
|
||||
c.fillStyle = opts.color || settings.color;
|
||||
var type = opts.type || settings.shape;
|
||||
switch(type) {
|
||||
case 'mark': {
|
||||
c.fillStyle = 'red';
|
||||
c.arc(opts.x, opts.y, 3, 0, 2*Math.PI);
|
||||
break;
|
||||
}
|
||||
case 'circle': {
|
||||
c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
|
||||
break;
|
||||
}
|
||||
case 'rectangle': {
|
||||
c.rect(opts.x, opts.y, opts.width, opts.height);
|
||||
break;
|
||||
}
|
||||
case 'square': {
|
||||
c.rect(opts.x, opts.y, opts.width, opts.width);
|
||||
break;
|
||||
}
|
||||
case 'triangle': {
|
||||
c.fillStyle = opts
|
||||
c.moveTo(opts.x1, opts.y1);
|
||||
c.lineTo(opts.x2, opts.y2);
|
||||
c.lineTo(opts.x3, opts.y3);
|
||||
c.lineTo(opts.x1, opts.y1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
c.fill();
|
||||
}
|
||||
|
||||
function undo() {
|
||||
var history = window.points.history;
|
||||
if( history.last > 1 ) {
|
||||
@ -56,7 +94,7 @@ function undo() {
|
||||
window.points.history = history;
|
||||
window.points.history.last = history.last-1;
|
||||
} else {
|
||||
c.clearRect(0,0, width(), height());
|
||||
c.clear();
|
||||
window.points = [];
|
||||
window.points.history = history;
|
||||
window.points.history.last = 0;
|
||||
@ -106,21 +144,171 @@ function startPoint(x, y) {
|
||||
start : old.start || {x: x, y: y},
|
||||
type : settings.type
|
||||
}
|
||||
|
||||
// Line
|
||||
if( old.type !== 'line' && current.type == 'line' ) {
|
||||
window.o.beginPath();
|
||||
window.o.fillStyle = 'red';
|
||||
window.o.arc(x,y, 3, 0, 2*Math.PI);
|
||||
window.o.fill();
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
}
|
||||
|
||||
if( old.type == 'line' && current.type == 'line' ) {
|
||||
if( points[points.indexOf(old)-1].type !== 'line' ) {
|
||||
o.clearRect(old.x-3, old.y-3, 6, 6, true);
|
||||
o.clear();
|
||||
draw(old.x, old.y, x, y);
|
||||
} else
|
||||
draw(old.x, old.y, x, y);
|
||||
}
|
||||
|
||||
// Shapes
|
||||
|
||||
if( current.type == 'shape' ) {
|
||||
switch(settings.shape) {
|
||||
case 'circle': {
|
||||
switch(settings.shapePoints.length) {
|
||||
case 0: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
var radius = Math.abs(settings.shapePoints[0].x - x);
|
||||
o.clear();
|
||||
shape({
|
||||
type: 'circle',
|
||||
x: settings.shapePoints[0].x,
|
||||
y: settings.shapePoints[0].y,
|
||||
radius: radius
|
||||
})
|
||||
settings.shapePoints = [];
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'rectangle': {
|
||||
switch(settings.shapePoints.length) {
|
||||
case 0: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: old.y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: old.y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
o.clear();
|
||||
shape({
|
||||
type: 'rectangle',
|
||||
x: settings.shapePoints[0].x,
|
||||
y: settings.shapePoints[0].y,
|
||||
width: settings.shapePoints[1].x - settings.shapePoints[0].x,
|
||||
height: y - settings.shapePoints[0].y
|
||||
})
|
||||
settings.shapePoints = [];
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'square': {
|
||||
switch(settings.shapePoints.length) {
|
||||
case 0: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
window.o.clear();
|
||||
shape({
|
||||
type: 'square',
|
||||
x: old.x,
|
||||
y: old.y,
|
||||
width: x - old.x
|
||||
})
|
||||
settings.shapePoints = [];
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'triangle': {
|
||||
switch(settings.shapePoints.length) {
|
||||
case 0: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
settings.shapePoints.push({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
shape({
|
||||
type: 'mark',
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
window.o.clear();
|
||||
shape({
|
||||
type: 'triangle',
|
||||
x1: settings.shapePoints[0].x,
|
||||
y1: settings.shapePoints[0].y,
|
||||
x2: settings.shapePoints[1].x,
|
||||
y2: settings.shapePoints[1].y,
|
||||
x3: x,
|
||||
y3: y
|
||||
})
|
||||
settings.shapePoints = [];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var thresholds = window.mobile ? [10, 5] : [5, 2];
|
||||
if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
|
||||
window.active = false;
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
$(document).ready(function() {
|
||||
window.c = $('canvas')[0].getContext('2d');
|
||||
window.o = $('canvas')[1].getContext('2d');
|
||||
window.c.clear = window.o.clear = function() {
|
||||
this.clearRect(0, 0, width(), height());
|
||||
}
|
||||
|
||||
window.settings = {
|
||||
lineWidth : 2,
|
||||
@ -12,7 +15,9 @@ $(document).ready(function() {
|
||||
lineJoin: 'round',
|
||||
furLength: 5,
|
||||
connectTelorance: 40,
|
||||
composite: 'source-over'
|
||||
composite: 'source-over',
|
||||
shape: 'circle',
|
||||
shapePoints: []
|
||||
};
|
||||
window.points = [];
|
||||
window.$c = $('canvas');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user