Skip to content

Commit

Permalink
Add new line grid instead of using an image.
Browse files Browse the repository at this point in the history
  • Loading branch information
Ahmed Nabulsi committed Sep 24, 2018
1 parent 5a43b93 commit d279398
Show file tree
Hide file tree
Showing 3 changed files with 825 additions and 212 deletions.
62 changes: 47 additions & 15 deletions css/lumen-canvas.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
cursor: default;
opacity: 0.3
}
.lumen-canvas .lumen-drawing {
.lumen-canvas.toolbar-at-top .lumen-drawing {
bottom: 0;
top: 0;
}
Expand All @@ -41,7 +41,7 @@
.lumen-canvas {
position: relative;
background-color: #ddd;
border: 1px solid #8a8a8a;
border: 1px solid #099;
min-height: 400px;
-webkit-touch-callout: none;
-webkit-user-select: none;
Expand All @@ -50,7 +50,6 @@
-ms-user-select: none;
-ms-touch-action: none;
user-select: none;
border-top: 1px solid #ccc;
}
.lumen-canvas,
.lumen-canvas * {
Expand All @@ -68,7 +67,7 @@
left: 0;
bottom: 0;
width: 61px;
background-color: #d6d6d6;
background-color: #e6e6e6
}
.lumen-canvas .lumen-drawing {
right: 0;
Expand Down Expand Up @@ -101,7 +100,7 @@
}
.lumen-canvas .lumen-picker {
z-index: 2;
border-right: 1px solid #8c8c8c;
border-right: 1px solid #099;
}
.lumen-canvas .lumen-picker .toolbar-button {
width: 30px;
Expand Down Expand Up @@ -153,6 +152,7 @@
.lumen-canvas .lumen-picker .lumen-redo,
.lumen-canvas .lumen-picker .lumen-zoom-in,
.lumen-canvas .lumen-picker .lumen-zoom-out,
.lumen-canvas .lumen-picker .lumen-reset-zoom,
.lumen-canvas .lumen-picker .lumen-color-fill,
.lumen-canvas .lumen-picker .lumen-insert-equation {
background-size: 80% auto;
Expand Down Expand Up @@ -246,6 +246,22 @@
right: 15px;
z-index: 1000;
}

.lumen-canvas .lumen-picker .lumen-reset-zoom{
padding-top: 4px;
font-size: 14px;
width: 100%;
line-height: 16px;
clear: both;
/*height: 62px;*/
height: 26px;
border-right: 0px;
background-size: 100%;
}
.lumen-canvas .lumen-picker .lumen-reset-zoom img{
width: 18px;
height: 18px;
}
.lumen-options.horz-toolbar .lumen-zoom-in,
.lumen-options.horz-toolbar .lumen-zoom-out{
width: 25px;
Expand All @@ -265,9 +281,10 @@
}
.lumen-canvas .horz-toolbar .square-toolbar-button {
border: 2px solid transparent;
border-radius: 5px;
border-radius: 50%;
margin: 1px 5px;
/* border:1px solid #aaa; */

width: 35px;
height: 35px;
float: left;
Expand Down Expand Up @@ -312,7 +329,7 @@
.lumen-canvas.toolbar-at-bottom .polygon-toolbar {
top: -100%
}
.lumen-canvas .polygon-toolbar {
.lumen-canvas.toolbar-at-top .polygon-toolbar {
top: 100%
}
.lumen-canvas .lumen-options {
Expand Down Expand Up @@ -411,19 +428,19 @@
width: 29px;
border-radius: 0px !important;
}
.lumen-canvas .lumen-options {
.lumen-canvas.toolbar-at-top .lumen-options {
bottom: 0px;
border-top: 1px solid #8c8c8c;
border-top: 1px solid #099;
padding: 5px 10px;
height: 50px;
background: #d6d6d6;
/* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); */
/* background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
/* background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); */
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.lumen-canvas .color-well label {
Expand Down Expand Up @@ -481,14 +498,29 @@
height: 30px;
position: relative;
cursor: pointer;
border: 1px solid #908e8e;
border: 1px solid #d8d8d8;
}
.lumen-edit-toolbar .lumen-edit-button.lumen-trash img{
width: 28px;
height: 25px;
top: 3px;
position: relative;
}
.lumen-edit-toolbar .lumen-edit-button.lumen-copy img{
width: 72px;
left: 4px;
top: 3px;
}
.lumen-edit-toolbar .lumen-edit-button.lumen-cut img{
width: 82px;
left: -24px;
top: 2px;
}
.lumen-edit-toolbar .lumen-edit-button.lumen-paste img{
width: 70px;
left: -45px;
top: 2px;
}
/*Edit toolbar*/

/*Insert text tool*/
Expand Down
25 changes: 16 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, width=device-width">
<title>Lumen Canvas Paint</title>
<meta name="Description" content="LumenCanvas is a JavaScript drawing tool based on FabricJS and JQuery. LumenCanvas is an HTML5 paint tool that gives you the ability to draw and save you drawing as JSON, SNG and PNG.">
<meta name="Keywords" content="javascript paint,js paint,jquery paint, jquery drawing tool, js drawing tool, html5 paint, html paint,canvas paint, canvas drawing tool">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Expand All @@ -19,7 +21,8 @@
<link rel="stylesheet" href="css/spectrum.css">
<script src="js/spectrum.js"></script>
<style>
@media (max-width: 760px){
html, body {width: 100%;}
@media screen and (max-width: 760px){
body aside {
width: 100%;
min-height: auto;
Expand All @@ -32,6 +35,9 @@
width: 96%;
margin: 0 2%;
}
body section h3{
font-family: sans-serif;
}
}
*{font-family: 'Open Sans', sans-serif;}
#page-header{
Expand Down Expand Up @@ -95,6 +101,7 @@
border-radius: 4px;
padding: 2px 12px;
margin: 35px 0px;
overflow: auto;
}
pre{
font-family: Monaco, Consolas, "Lucida Console", monospace;
Expand Down Expand Up @@ -204,7 +211,7 @@ <h1 id="page-header">LumenCanvas</h1>
<section>
<h2 style="margin-top: 0px;">Introduction</h2>
<h3>LumenCanvas is an open source HTML5 drawing tool based on Fabric.js & JQuery. You can use it to embed drawing boards in web pages. You can save the drawings as a string or JSON and you can retrive it again. LumenCanvas is an object based drawing tool. You can move the drawn objects around and change the border of the filling color.</h3>
<div id="drawing-canvas" class="drawing-canvas" style="height: 600px; margin: 0 auto;"></div>
<div id="drawing-canvas" class="drawing-canvas toolbar-at-top" style="height: 600px; margin: 0 auto;"></div>
<br>
<br>
<p>Lumen Canvas&#8217;s features:</p>
Expand Down Expand Up @@ -238,7 +245,7 @@ <h2 id="installing" style="margin-top: 0px;">Installation</h2>
<span style="color:#062873;">&lt;script</span> src="js/lumen-canvas.js"&gt;<span style="color:#062873;">&lt;/script&gt;</span>
<span style="color:#062873;">&lt;/head&gt;</span>
<span style="color:#062873;">&lt;body&gt;</span>
<span style="color:#062873;">&lt;div id="drawing-canvas" class="drawing-canvas" style="height: 600px; margin: 0 auto;"&gt;<span style="color:#062873;">&lt;/div&gt;</span>
<span style="color:#062873;">&lt;div id="drawing-canvas" class="drawing-canvas toolbar-at-top" style="height: 600px; margin: 0 auto;"&gt;<span style="color:#062873;">&lt;/div&gt;</span>
<span style="color:#062873;">&lt;script&gt;
<span style="color:#3822b5;">new</span> <span style="color:#828282;">LumenCanvas</span> <span style="color:#000;">({</span>
<span style="color:#6858b9;">selector</span> : <span style="color:#828282;">"#drawing-canvas"</span>
Expand All @@ -253,7 +260,7 @@ <h2 id="installing" style="margin-top: 0px;">Installation</h2>
<section id="examples">
<div class="canvas-example">
<h2>Canvas with watermark</h2>
<div id="drawing-canvas2" class="drawing-canvas" style="height: 600px; margin: 0 auto;"></div>
<div id="drawing-canvas2" class="drawing-canvas toolbar-at-top" style="height: 600px; margin: 0 auto;"></div>
<div class="code-section">
<pre>
<span style="color:#3822b5;">new</span> <span style="color:#828282;">LumenCanvas</span> <span style="color:#000;">({</span>
Expand All @@ -271,7 +278,7 @@ <h2>Canvas with watermark</h2>

<div class="canvas-example">
<h2>Export Canvas SVG & JSON</h2>
<div id="drawing-canvas3" class="drawing-canvas" style="height: 600px; margin: 0 auto;"></div>
<div id="drawing-canvas3" class="drawing-canvas toolbar-at-top" style="height: 600px; margin: 0 auto;"></div>
<br>
<button id="export-svg" class="btn btn-info">Export SVG</button> &nbsp;&nbsp;&nbsp;
<button id="export-json" class="btn btn-info">Export JSON</button>
Expand Down Expand Up @@ -306,7 +313,7 @@ <h4>JSON Output</h4>

<div class="canvas-example">
<h2>Import JSON</h2>
<div id="drawing-canvas4" class="drawing-canvas" style="height: 600px; margin: 0 auto;"></div>
<div id="drawing-canvas4" class="drawing-canvas toolbar-at-top" style="height: 600px; margin: 0 auto;"></div>
<br>
<button id="import-json" class="btn btn-info">Set Data</button> &nbsp;&nbsp;&nbsp;
<h4>JSON Input</h4>
Expand Down
Loading

0 comments on commit d279398

Please sign in to comment.