-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (101 loc) · 5.8 KB
/
index.html
File metadata and controls
126 lines (101 loc) · 5.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Canvasshapes by guerratron</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/github-dark.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/main.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<header>
<h1>Canvasshapes</h1>
<p>Library of creation, manipulation and calculation of flat geometric shapes.</p>
</header>
<div id="banner">
<span id="logo"></span>
<a href="https://github.com/guerratron/canvasShapes" class="button fork"><strong>View On GitHub</strong></a>
<div class="downloads">
<span>Downloads:</span>
<ul>
<li><a href="https://github.com/guerratron/canvasShapes/zipball/master" class="button">ZIP</a></li>
<li><a href="https://github.com/guerratron/canvasShapes/tarball/master" class="button">TAR</a></li>
</ul>
</div>
</div><!-- end banner -->
<div class="wrapper">
<nav>
<ul></ul>
</nav>
<section>
<blockquote>
<hr>
<p>'canvasShapes' (namespace) - Library of creation, manipulation and calculation of flat geometric shapes.<br>
Library: 'PolyArea'.<br>
Author: Juan José Guerra Haba - <a href="mailto:dinertron@gmail.com">dinertron@gmail.com</a> - Marzo de 2016<br>
License: Free BSD. & Open GPL v.3. Keep credit, please.<br>
Versión: 0.9.0 BETA<br>
File: canvasShapes.js Main Class: PolyArea.js </p>
<hr>
</blockquote>
<h1>
<a id="canvasshapes" class="anchor" href="#canvasshapes" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>canvasShapes</h1>
<p>It is a library for drawing geometric figures associated events. </p>
<p>It shows geometric calculations (areas, perimeters, ...) and supports a free drawn mode <em>"freehand"</em>; also it has a
graphical interface with buttons bar and an options window where display / modify some of the multiple parameters supported. </p>
<p><em>'CANVAS-SHAPES'</em> is actually a namespace that hold the library <strong>'PolyArea'</strong> which is responsible for the bulk of drawn figures,
but also houses objects and methods useful in separate modules.<br>
HTML element works on a <em>'canvas'</em> that constructs itself and on which it has implemented a reception event for the creation and
modified the figures (points, segments, ...)</p>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage</h2>
<p>After loading the file in the <em>'head'</em> zone (<code><script src = "... / canvasShapes.js" ...> </ script></code>) you can start to use the library under the namespace: <em>'canvasShapes'</em>. It could commence for example, with the viewing of the UI by the method:</p>
<pre><code>canvasShapes.render( {id: "idElement"} );
</code></pre>
<p>where the string <em>'idElement'</em> is expected that identifies the container element, that is, the element
in which all imbibing <em>UI</em>.<br>
From here everything is done visually and interactively in the <strong>GUI</strong>.</p>
<h2>
<a id="features" class="anchor" href="#features" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Features:</h2>
<ul>
<li>OOP Philosophy, classes, inheritance, modularity, abstraction, ...</li>
<li>
<em>ECMASCRIPT</em> 6 features: <code>"use-strict"</code>.</li>
<li>Cross-Browser.</li>
<li>Modularity and abstraction by js-modules and Closures.</li>
<li>Grouping of modules in a single file to simplify the call in the <em>'head'</em>.</li>
<li>Self-content CSS, <em>media-queries</em>, <em>'bootstrap'</em> patterns.</li>
<li>
<em>OUTSTANDING !!</em> : Assigning events to the figures in the <em>'canvas'</em>.<br>
This is really <strong>INNOVATIVE</strong> and that everyone knows that drawn on a canvas does not allow events, since
they are not objects, but the library does implement recognizing the figures drawn as objects.</li>
</ul>
<h2>
<a id="developing" class="anchor" href="#developing" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Developing</h2>
<p>Developed by <a href="mailto://dinertron@gmail.com" title="author">GuerraTron</a> <a href="https://github.com/2016" class="user-mention">@2016</a></p>
<h3>
<a id="tools" class="anchor" href="#tools" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Tools</h3>
<p>Notepad ++ </p>
<p>Created with <a href="https://github.com/Nodeclipse/nodeclipse-1">Nodeclipse</a>
(<a href="http://marketplace.eclipse.org/content/nodeclipse">Eclipse Marketplace</a>, <a href="http://www.nodeclipse.org">site</a>)
Nodeclipse is free open-source project that grows with your contributions.</p>
<h3>
<a id="author" class="anchor" href="#author" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Author:</h3>
<p>I hope it can be useful to someone as it has been for me. In this case it would be appreciated email commenting
use or suggestions for future improvements. <br>
¡ KEEP CREDITS, PLEASE !</p>
</section>
<footer>
<p>Project maintained by <a href="https://github.com/guerratron">guerratron</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://twitter.com/michigangraham">mattgraham</a></small></p>
</footer>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>