Skip to content

Commit

Permalink
Add Raphael documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian Li committed Jul 16, 2016
1 parent 5eb5483 commit 11a58e1
Show file tree
Hide file tree
Showing 16 changed files with 862 additions and 0 deletions.
13 changes: 13 additions & 0 deletions _includes/analytics.html
View file
@@ -0,0 +1,13 @@
<!-- Google Analytics -->
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'></script>
<script type='text/javascript'>
_uacct = 'UA-317324-1';
urchinTracker();
</script>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6453565;
var sc_invisible=1;
var sc_security="285089de";
</script>
<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c36.statcounter.com/3249429/0/8b3a3ada/0/" alt="website statistics" /></a></div></noscript>
254 changes: 254 additions & 0 deletions _includes/editing.html
View file
@@ -0,0 +1,254 @@
<div class="reference span-24">
<h2>Editing Actions and Pen Properties</h2>

<div class="span-8">
{% capture editor_js %}
<div id="editor" class="widget" style="height:260px;"></div>
<input type="hidden" id="data2" name="data2" />

<div class="clear widget_actions span-2">
<div class="_title">Color</div>
<div id="editor_black" class="selected">Black</div>
<div id="editor_red">Red</div>
</div>
<div class="widget_actions span-2">
<div class="_title">Width</div>
<div id="editor_thin" class="selected">Thin</div>
<div id="editor_thick">Thick</div>
</div>
<div class="widget_actions span-2">
<div class="_title">Opacity</div>
<div id="editor_solid" class="selected">Solid</div>
<div id="editor_fuzzy">Fuzzy</div>
</div>
<div class="widget_actions span-2 last">
<div id="editor_undo" class="disabled">Undo</div>
<div id="editor_redo" class="disabled">Redo</div>
<div id="editor_clear" class="disabled">Clear</div>
</div>
<div class="clear"></div>
<div class="widget_actions span-4">
<div id="editor_draw_erase">Draw</div>
</div>
<div class="widget_actions span-4 last">
<div id="editor_animate">Animate!</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
var sketchpad = Raphael.sketchpad("editor", {
height: 260,
width: 260,
editing: true // true is default
});

// When the sketchpad changes, update the input field.
sketchpad.change(function() {
$("#data2").val(sketchpad.json());
});

sketchpad.strokes([{
"type":"path",
"path":[["M",10,10],["L",90,90]],
"fill":"none",
"stroke":"#000000",
"stroke-opacity":1,
"stroke-width":5,
"stroke-linecap":"round",
"stroke-linejoin":"round"
}]);

function enable(element, enable) {
if (enable) {
$(element).removeClass("disabled");
} else {
$(element).addClass("disabled");
}
};

function select(element1, element2) {
$(element1).addClass("selected");
$(element2).removeClass("selected");
}

$("#editor_undo").click(function() {
sketchpad.undo();
});
$("#editor_redo").click(function() {
sketchpad.redo();
});
$("#editor_clear").click(function() {
sketchpad.clear();
});
$("#editor_animate").click(function() {
sketchpad.animate();
});

$("#editor_thin").click(function() {
select("#editor_thin", "#editor_thick");
sketchpad.pen().width(5);
});
$("#editor_thick").click(function() {
select("#editor_thick", "#editor_thin");
sketchpad.pen().width(15);
});
$("#editor_solid").click(function() {
select("#editor_solid", "#editor_fuzzy");
sketchpad.pen().opacity(1);
});
$("#editor_fuzzy").click(function() {
select("#editor_fuzzy", "#editor_solid");
sketchpad.pen().opacity(0.3);
});
$("#editor_black").click(function() {
select("#editor_black", "#editor_red");
sketchpad.pen().color("#000");
});
$("#editor_red").click(function() {
select("#editor_red", "#editor_black");
sketchpad.pen().color("#f00");
});
$("#editor_draw_erase").toggle(function() {
$(this).text("Erase");
sketchpad.editing("erase");
}, function() {
$(this).text("Draw");
sketchpad.editing(true);
});

function update_actions() {
enable("#editor_undo", sketchpad.undoable());
enable("#editor_redo", sketchpad.redoable());
enable("#editor_clear", sketchpad.strokes().length > 0);
}

sketchpad.change(update_actions);

update_actions();
});
</script>
{% endcapture %}

{{ editor_js }}
</div>

<div class="span-8">
<h3>Editing Actions</h3>

<p>
The editor supports various editing actions.
</p>

<div class="span-2">
<h4>clear</h4>
</div>
<div class="span-6 last">
{% capture js %}
// Clear the editor.
editor.clear();
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>undo</h4>
</div>
<div class="span-6 last">
{% capture js %}
// Undo the last stroke.
editor.undo();
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>undoable</h4>
</div>
<div class="span-6 last">
{% capture js %}
// True if can undo.
editor.undoable();
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>redo</h4>
</div>
<div class="span-6 last">
{% capture js %}
// Redo the undone stroke.
editor.redo();
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>redoable</h4>
</div>
<div class="span-6 last">
{% capture js %}
// True if can redo.
editor.redoable();
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>
</div>

<div class="span-8 last">
<h3>Pen Properties</h3>

<p>
The pen has various properties that you can set.
</p>

<div class="span-2">
<h4>color</h4>
</div>
<div class="span-6 last">
{% capture js %}
// #ff0000 or #f00
pen.color("#ff0000");
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>width</h4>
</div>
<div class="span-6 last">
{% capture js %}
// min = 1, max = 1000
pen.width(10);
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>

<div class="span-2">
<h4>opacity</h4>
</div>
<div class="span-6 last">
{% capture js %}
// min = 0, max = 1.0
pen.opacity(10);
{% endcapture %}

<pre class="code">{{ js | strip | escape }}</pre>
</div>
</div>

<div class="span-24">
<a href="javascript:void(0);" onclick="$(this).next('pre.code').toggle();">Show source</a>
<pre class="code"
style="display:none">{{ editor_js | strip | escape }}</pre>
</div>

<hr class="space">
</div>
31 changes: 31 additions & 0 deletions _includes/header.html
View file
@@ -0,0 +1,31 @@
<div id="hd" class="span-24">
<div class="span-16">
<div style="float:right;">
by <a href="http://ianli.com">Ian Li</a>
</div>
<h1>Raphael SketchPad</h1>
</div>

<div class="clear span-16">
<p>
Raphael Sketchpad is a simple drawing editor that you can easily include with your forms.<br/>
It is similar to <a href="http://www.mainada.net/inputdraw">Mai'Nada.net's InputDraw</a>,
but does not require Flash.<br/>
It is built on top of the <a href="http://raphaeljs.com">Raphael</a>
Javascript vector graphics library.
</p>
<p>
Raphael Sketchpad requires these Javascript libraries:
<a href="http://raphaeljs.com/">Raphael 2.0.1</a>,
<a href="http://jquery.com/">jQuery</a>, and
<a href="http://www.json.org/js.html">JSON.stringify</a>.
</p>
</div>
<div class="span-8 last" style="text-align:center;">
<div style="margin-bottom:5px;border:2px solid #e3e3e3;border-width:0 2px 3px 0;">
<a id="download" href="javascripts/raphael.sketchpad.js">Download 0.5.1</a>
</div>
or visit the
<a href="http://github.com/ianli/raphael-sketchpad">GitHub project page</a>.
</div>
</div>
60 changes: 60 additions & 0 deletions _includes/how-it-works.html
View file
@@ -0,0 +1,60 @@
<h2 class="clear">How It Works</h2>

<div class="span-8">
<h3>Editor</h3>
<p>
Draw a sketch below.
</p>
<div style="height:260px;" class="widget">
<div id="sketchpad_editor"></div>
</div>
</div>

<div class="span-8">
<h3>Result</h3>
<p>
The sketch is stored as JSON in an input field.
</p>
<form action="" method="post" onsubmit="return false;">
<textarea id="input1" name="input1" style="margin:0;width:250px;height:250px;"></textarea>
</form>
</div>

<div class="span-8 last">
<h3>Viewer</h3>
<p>
<a href="javascript:void(0);" id="update_sketchpad_viewer">Click</a>
to display the JSON data in the viewer.
</p>
<div style="height:260px;" class="widget">
<div id="sketchpad_viewer"></div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
var strokes = [];

var sketchpad_editor = Raphael.sketchpad("sketchpad_editor", {
width: 260,
height: 260,
editing: true, // true is default
strokes: strokes
});
sketchpad_editor.change(function() {
$("#input1").val(sketchpad_editor.json());
});

var sketchpad_viewer = Raphael.sketchpad("sketchpad_viewer", {
width: 260,
height: 260,
editing: false
});

$("#update_sketchpad_viewer").click(function() {
sketchpad_viewer.json($('#input1').val());
});
});
</script>

<hr class="space" />

0 comments on commit 11a58e1

Please sign in to comment.