Commit e59a80e0 authored by bbaer's avatar bbaer
Browse files

playing around with active color

parent e92278e3
...@@ -9,6 +9,7 @@ $(function () { ...@@ -9,6 +9,7 @@ $(function () {
var saveTwo = false; var saveTwo = false;
var saveThree = false; var saveThree = false;
var bgColor = '#fff'; var bgColor = '#fff';
var activeColor = {red: 0, green: 0, blue: 0, opacity: 1};
var bgOpacity = 1; var bgOpacity = 1;
var fgColor = '#000'; var fgColor = '#000';
var borderColor = '#000'; var borderColor = '#000';
...@@ -87,6 +88,14 @@ $(function () { ...@@ -87,6 +88,14 @@ $(function () {
} }
} }
function getActiveRGBA(changedOpacity) {
var opacity = activeColor.opacity;
if (changedOpacity) {
opacity = changedOpacity;
}
return "rgba(" + activeColor.red + "," + activeColor.green + "," + activeColor.blue + "," + opacity + ")";
}
function deleteActiveGroup() { function deleteActiveGroup() {
if (canvas.getActiveGroup()) { if (canvas.getActiveGroup()) {
canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) }); canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
...@@ -101,6 +110,8 @@ $(function () { ...@@ -101,6 +110,8 @@ $(function () {
var pointer = canvas.getPointer(o.e); var pointer = canvas.getPointer(o.e);
origX = pointer.x; origX = pointer.x;
origY = pointer.y; origY = pointer.y;
var colorFill = getActiveRGBA(0.4);
var colorBorder = getActiveRGBA(1);
pointer = canvas.getPointer(o.e); pointer = canvas.getPointer(o.e);
var rect = new fabric.Rect({ var rect = new fabric.Rect({
left: origX, left: origX,
...@@ -110,9 +121,9 @@ $(function () { ...@@ -110,9 +121,9 @@ $(function () {
width: pointer.x-origX, width: pointer.x-origX,
height: pointer.y-origY, height: pointer.y-origY,
angle: 0, angle: 0,
fill: 'rgba(255,0,0,0.4)', fill: colorFill,
strokeWidth: borderSize, strokeWidth: borderSize,
stroke: 'rgba(255, 0, 0, 1)', stroke: colorBorder,
selectable: true, selectable: true,
borderScaleFactor: 0, borderScaleFactor: 0,
hasControls: false hasControls: false
...@@ -165,7 +176,8 @@ $(function () { ...@@ -165,7 +176,8 @@ $(function () {
adjustDefaultPosition(); adjustDefaultPosition();
} }
function setBrush(color, brushSize) { function setBrush(brushSize) {
var color = getActiveRGBA();
canvas.freeDrawingBrush.color = color; canvas.freeDrawingBrush.color = color;
if (!brushSize) { if (!brushSize) {
brushSize = 2; brushSize = 2;
...@@ -317,19 +329,35 @@ $(function () { ...@@ -317,19 +329,35 @@ $(function () {
}); });
$("#draw-black").on("click", function() { $("#draw-black").on("click", function() {
setBrush('rgba(0, 0, 0, 0.8)'); activeColor.red = 0;
activeColor.green = 0;
activeColor.blue = 0;
activeColor.opacity = 0.8;
setBrush();
}); });
$("#draw-red").on("click", function() { $("#draw-red").on("click", function() {
setBrush('rgba(255, 0, 0, 0.8)'); activeColor.red = 255;
activeColor.green = 0;
activeColor.blue = 0;
activeColor.opacity = 0.8;
setBrush();
}); });
$("#draw-blue").on("click", function() { $("#draw-blue").on("click", function() {
setBrush('rgba(0, 0, 255, 0.8)'); activeColor.red = 0;
activeColor.green = 204;
activeColor.blue = 255;
activeColor.opacity = 0.8;
setBrush();
}); });
$("#highlight-yellow").on("click", function() { $("#highlight-yellow").on("click", function() {
setBrush('rgba(255, 204, 0, 0.4)', 12); activeColor.red = 255;
activeColor.green = 204;
activeColor.blue = 0;
activeColor.opacity = 0.4;
setBrush(12);
}); });
$("#text-yellow-border").on("click", function() { $("#text-yellow-border").on("click", function() {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment