Permalink
Browse files

ok now there is a very basic drawing tool. communication still non-ex…

…istant
  • Loading branch information...
1 parent d07071c commit 0152ea0cef7712fc00ddd62ce80feab218464dd1 @deserat committed Dec 13, 2010
Showing with 138 additions and 41 deletions.
  1. +45 −0 public/index.html
  2. +93 −41 public/js/script.js
View
@@ -45,6 +45,51 @@
<div id="main">
<canvas id="draw-space" width="720px" height="480px"></canvas>
+ <div>
+ <form>
+ <select name="size" id="size" class="brush_setter">
+ <option value="1" >Fine</option>
+ <option value="5" selected='selected'>Medium</option>
+ <option value="10">Large</option>
+ <option value="50">Big Ol' Size</option>
+ </select>
+ <select name="color" id="color" class="brush_setter">
+ <option value="255,0,0">Red</option>
+ <option value="0,255,0">Green</option>
+ <option value="0,0,255">Blue</option>
+ <option value="0,0,0" selected="selected">Black</option>
+ <option value="255,255,255">White</option>
+ </select>
+ <select name="opacity" id="opacity" class="brush_setter">
+ <option value="0">0</option>
+ <option value=".1">10%</option>
+ <option value=".2">20%</option>
+ <option value=".3">30%</option>
+ <option value=".4">40%</option>
+ <option value=".5">50%</option>
+ <option value=".6">60%</option>
+ <option value=".7">70%</option>
+ <option value=".8">80%</option>
+ <option value=".9">90%</option>
+ <option value="1" selected="selected">100%</option>
+ </select>
+ <select name="lineCap" id="lineCap" class="brush_setter">
+ <option value="round" selected="selected">Round</option>
+ <option value="square">Square</option>
+ <option value="butt">Butthead</option>
+ </select>
+ <select name="lineJoin" id="lineJoin" class="brush_setter">
+ <option value="round" selected="selected">Round</option>
+ <option value="bevel">Bevel</option>
+ <option value="miter">Miter</option>
+ </select>
+ <select name="stroke" id="stroke" class="brush_setter">
+ <option value="line" selected="selected">Line</option>
+ <option value="spines">Spines</option>
+ <option value="dots">Dots</option>
+ </select>
+ </form>
+ </div>
</div>
<footer>
View
@@ -11,10 +11,10 @@ var socket;
var events = [];
var client;
var myId;
+var brush;
MOUNT_POINT = 'http://192.168.1.102:8000/drawer';
-
function drawPosition(x,y) { return { x: x - coords.l, y: y - coords.t }; }
dojo.addOnLoad( function(e){
@@ -27,9 +27,9 @@ dojo.addOnLoad( function(e){
myId = Math.floor(Math.random()*11)
console.log(myId);
- //client = new Faye.Client(MOUNT_POINT, {timeout:240});
+ brush = new Brush({});
- console.log(client);
+ //client = new Faye.Client(MOUNT_POINT, {timeout:240});
//var subscription = client.subscribe('/draw', function(m) {
// if ( m.user != myId ) {
@@ -39,49 +39,73 @@ dojo.addOnLoad( function(e){
// }
//});
-dojo.connect(canvas,'mouseover', function (e) {
- console.log("enter canvas");
- console.log(e);
-});
-
-dojo.connect(canvas, 'mousedown', function (e) {
-
- var p = drawPosition(e.pageX, e.pageY);
-
- ctx.beginPath();
- ctx.moveTo(p.x, p.y);
-
- events['paint'] = dojo.connect(canvas, 'mousemove', function (e) {
- p = drawPosition(e.pageX, e.pageY);
- ctx.lineTo(p.x,p.y);
- ctx.stroke();
- //client.publish('/draw', {user:myId,x:p.x,y:p.y});
- //dojox.cometd.publish('/draw', {user:myId,x:p.x,y:p.y});
+ dojo.connect(canvas,'mouseover', function (e) {
+ console.log("enter canvas");
+ console.log(e);
});
-});
-
-dojo.connect(canvas,'mouseup', function (e) {
- dojo.disconnect(events['paint']);
-});
+ dojo.connect(canvas, 'mousedown', function (e) {
+ console.log("mousedown");
+ var p = drawPosition(e.pageX, e.pageY);
+ ctx.strokeStyle = brush.color.toString();
+ ctx.lineWidth = brush.size;
+ ctx.lineCap = brush.lineCap;
+ ctx.lineJoin = brush.lineJoin;
+ ctx.beginPath();
+ ctx.moveTo(p.x,p.y);
+
+ events['paint'] = dojo.connect(canvas, 'mousemove', function (e) {
+ p = drawPosition(e.pageX, e.pageY);
+ brush.stroke(p, ctx );
+ //ctx.lineTo(p.x,p.y);
+ //ctx.stroke();
+ //client.publish('/draw', {user:myId,x:p.x,y:p.y});
+ //dojox.cometd.publish('/draw', {user:myId,x:p.x,y:p.y});
+ });
+ });
-// when mouse leaves canvas unbind the move event
-dojo.connect(canvas,'mouseout', function (e) {
- dojo.disconnect(events['paint']);
-});
+ dojo.connect(canvas,'mouseup', function (e) {
+ dojo.disconnect(events['paint']);
+ });
+ // when mouse leaves canvas unbind the move event
+ dojo.connect(canvas,'mouseout', function (e) {
+ dojo.disconnect(events['paint']);
+ });
+ dojo.query('.brush_setter').connect('onchange', function(e) {
+ var el = e.currentTarget;
+ var id = el.id;
+ console.log(el);
+ console.log(id);
+ if ( id == 'size' || id == 'lineJoin' || id == 'lineCap' ) {
+ console.log(el.options[el.options.selectedIndex].value);
+ brush[id] = el.options[el.options.selectedIndex].value;
+ } else if ( id == 'color' ) {
+ c = el.options[el.options.selectedIndex].value.split(',');
+ brush.color.r = c[0];
+ brush.color.g = c[1]
+ brush.color.b = c[2]
+ console.log(brush.color);
+ } else if ( id == 'opacity' ) {
+ brush.color.a = el.options[el.options.selectedIndex].value;
+ } else if ( id == 'stroke' ) {
+ brush.stroke = getStroke(el.options[el.options.selectedIndex].value);
+ }
+ });
});
dojo.declare("Color", null, {
constructor : function(r,g,b,a) {
- this.r = r;
- this.g = g;
- this.b = b;
- this.a = a;
+ this.r = ( r != undefined ) ? r : 0;
+ this.g = ( g != undefined ) ? g : 0;
+ this.b = ( b != undefined ) ? b : 0;
+ this.a = ( a != undefined ) ? a : 1;
},
toString : function() {
+ console.log("toString");
+ console.log( 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')');
return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')';
},
});
@@ -91,11 +115,35 @@ dojo.declare("Color", null, {
// simple line
-function lineStroke(points,ctx) {
- ctx.lineTo(p.x,p.y);
- ctx.stroke();
+function getStroke(stroke) {
+
+if (stroke == 'line') {
+ return function lineStroke(points,ctx) {
+ ctx.lineTo(points.x,points.y);
+ ctx.stroke();
+ }
+} else if ( stroke == 'spines' ) {
+ return function spineStroke(points,ctx) {
+ ctx.beginPath();
+ ctx.moveTo(points.x-10,points.y-10);
+ ctx.lineTo(points.x+10,points.y+10);
+ ctx.stroke();
+ }
+} else if ( stroke == 'dots' ) {
+ return function dotStroke(points,ctx) {
+ ctx.beginPath();
+ ctx.moveTo(points.x,points.y);
+ ctx.lineTo(points.x,points.y);
+ ctx.stroke();
+
+ }
+
+}
}
+
+
+
/**
* Object used in Paper for determining stroke on canvas.
* The most imporant part will be pattern function.
@@ -104,12 +152,16 @@ function lineStroke(points,ctx) {
dojo.declare("Brush", null, {
size: null,
color: null,
- // a function that controls how the brush strokes if not defined just solid line
- stroke: 'solid',
+ stroke: null,
+ lineCap: null,
+ lineJoin: null,
+
constructor : function(args) {
this.size = (args.size != undefined) ? args.size : 5;
- this.color = (args.color != undefined) ? args.color : 'rgba(0,0,0,1)';
- this.stroke = (args.stroke != undefined) ? args.stroke : lineStroke;
+ this.color = new Color();
+ this.stroke = (args.stroke != undefined) ? args.stroke : getStroke('line');
+ this.lineJoin = (args.lineJoin != undefined) ? args.lineJoin : 'round';
+ this.lineCap = (args.lineCap != undefined) ? args.lineCap : 'round';
}
});

0 comments on commit 0152ea0

Please sign in to comment.