From 11a58e18aa576ab9e5b96f5f23860893339153a7 Mon Sep 17 00:00:00 2001 From: Ian Li Date: Fri, 15 Jul 2016 17:37:59 -0700 Subject: [PATCH] Add Raphael documentation --- _includes/analytics.html | 13 ++ _includes/editing.html | 254 +++++++++++++++++++++ _includes/header.html | 31 +++ _includes/how-it-works.html | 60 +++++ _includes/how-to-use-it.html | 94 ++++++++ _includes/reference.html | 13 ++ _includes/reference/animate.html | 62 +++++ _includes/reference/change.html | 40 ++++ _includes/reference/container.html | 14 ++ _includes/reference/editing.html | 32 +++ _includes/reference/json.html | 56 +++++ _includes/reference/paper.html | 14 ++ _includes/reference/pen.html | 14 ++ _includes/reference/raphael-sketchpad.html | 53 +++++ _includes/reference/strokes.html | 56 +++++ index.html | 56 +++++ 16 files changed, 862 insertions(+) create mode 100644 _includes/analytics.html create mode 100644 _includes/editing.html create mode 100644 _includes/header.html create mode 100644 _includes/how-it-works.html create mode 100644 _includes/how-to-use-it.html create mode 100644 _includes/reference.html create mode 100644 _includes/reference/animate.html create mode 100644 _includes/reference/change.html create mode 100644 _includes/reference/container.html create mode 100644 _includes/reference/editing.html create mode 100644 _includes/reference/json.html create mode 100644 _includes/reference/paper.html create mode 100644 _includes/reference/pen.html create mode 100644 _includes/reference/raphael-sketchpad.html create mode 100644 _includes/reference/strokes.html create mode 100644 index.html diff --git a/_includes/analytics.html b/_includes/analytics.html new file mode 100644 index 0000000..0182205 --- /dev/null +++ b/_includes/analytics.html @@ -0,0 +1,13 @@ + + + + + + diff --git a/_includes/editing.html b/_includes/editing.html new file mode 100644 index 0000000..9883b12 --- /dev/null +++ b/_includes/editing.html @@ -0,0 +1,254 @@ +
+

Editing Actions and Pen Properties

+ +
+ {% capture editor_js %} +
+ + +
+
Color
+
Black
+
Red
+
+
+
Width
+
Thin
+
Thick
+
+
+
Opacity
+
Solid
+
Fuzzy
+
+
+
Undo
+
Redo
+
Clear
+
+
+
+
Draw
+
+
+
Animate!
+
+ + +{% endcapture %} + + {{ editor_js }} +
+ +
+

Editing Actions

+ +

+ The editor supports various editing actions. +

+ +
+

clear

+
+
+ {% capture js %} +// Clear the editor. +editor.clear(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

undo

+
+
+ {% capture js %} +// Undo the last stroke. +editor.undo(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

undoable

+
+
+ {% capture js %} +// True if can undo. +editor.undoable(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

redo

+
+
+ {% capture js %} +// Redo the undone stroke. +editor.redo(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

redoable

+
+
+ {% capture js %} +// True if can redo. +editor.redoable(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+
+ +
+

Pen Properties

+ +

+ The pen has various properties that you can set. +

+ +
+

color

+
+
+ {% capture js %} +// #ff0000 or #f00 +pen.color("#ff0000"); +{% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

width

+
+
+ {% capture js %} + // min = 1, max = 1000 + pen.width(10); + {% endcapture %} + + 
{{ js | strip | escape }}
+
+ +
+

opacity

+
+
+ {% capture js %} + // min = 0, max = 1.0 + pen.opacity(10); + {% endcapture %} + + 
{{ js | strip | escape }}
+
+
+ +
+ Show source + +
+ +
+
diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..6e2277d --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,31 @@ +
+
+
+ by Ian Li +
+

Raphael SketchPad

+
+ +
+

+ Raphael Sketchpad is a simple drawing editor that you can easily include with your forms.
+ It is similar to Mai'Nada.net's InputDraw, + but does not require Flash.
+ It is built on top of the Raphael + Javascript vector graphics library. +

+

+ Raphael Sketchpad requires these Javascript libraries: + Raphael 2.0.1, + jQuery, and + JSON.stringify. +

+
+
+
+ Download 0.5.1 +
+ or visit the + GitHub project page. +
+
diff --git a/_includes/how-it-works.html b/_includes/how-it-works.html new file mode 100644 index 0000000..4439991 --- /dev/null +++ b/_includes/how-it-works.html @@ -0,0 +1,60 @@ +

How It Works

+ +
+

Editor

+

+ Draw a sketch below. +

+
+
+
+
+ +
+

Result

+

+ The sketch is stored as JSON in an input field. +

+
+ +
+
+ +
+

Viewer

+

+ Click + to display the JSON data in the viewer. +

+
+
+
+
+ + + +
diff --git a/_includes/how-to-use-it.html b/_includes/how-to-use-it.html new file mode 100644 index 0000000..630b0a4 --- /dev/null +++ b/_includes/how-to-use-it.html @@ -0,0 +1,94 @@ +

How to Use It

+ +
+
    +
  1. Include necessary javascript library files.
    2. +
+
+ +
+ {% capture html %} + + + + +{% endcapture %} + + 
{{ html | strip | escape }}
+
+ +
+
    +
  1. + To create an editor, + put a div with an id where you want the editor. + Add a form with a hidden input field with a different id. + Set the editing option to true (This is the default setting). +
    2. +
+
+ +
+ {% capture html %} +
+ +
+ + +
+ + +{% endcapture %} + + 
{{ html | strip | escape }}
+
+ +
+
    +
  1. + To create a viewer, + put a div with an id where you want the viewer. + Set strokes with an array of strokes. + Set the editing option to false. +
    2. +
+
+ +
+ {% capture html %} +
+ + +{% endcapture %} + + 
{{ html | strip | escape }}
+
+ +
diff --git a/_includes/reference.html b/_includes/reference.html new file mode 100644 index 0000000..9792210 --- /dev/null +++ b/_includes/reference.html @@ -0,0 +1,13 @@ +
+

Reference

+ + {% include reference/raphael-sketchpad.html %} + {% include reference/paper.html %} + {% include reference/container.html %} + {% include reference/pen.html %} + {% include reference/strokes.html %} + {% include reference/json.html %} + {% include reference/editing.html %} + {% include reference/change.html %} + {% include reference/animate.html %} +
diff --git a/_includes/reference/animate.html b/_includes/reference/animate.html new file mode 100644 index 0000000..701135e --- /dev/null +++ b/_includes/reference/animate.html @@ -0,0 +1,62 @@ +
+
+
+
+
Animate!
+
+
+

animate

+

+ Animates the strokes in the widget. + +

+ +

Parameters

+
    +
  1. ms number
    2. +
+
+
+ {% capture js %} +// Animates with 1 second (1000 ms) delay between frames. +viewer.animate(1000); + +// If no parameter is provided, delay is 500 ms (default). +viewer.animate(); +{% endcapture %} + 
{{ js | strip | escape }}
+ + +
diff --git a/_includes/reference/change.html b/_includes/reference/change.html new file mode 100644 index 0000000..7c5a23a --- /dev/null +++ b/_includes/reference/change.html @@ -0,0 +1,40 @@ +
+
+
+

+ Draw something here. +

+
+

change

+

+ Sets the function that handles the change event. + onchange events happen when +

+ +

Parameters

+
    +
  1. fn function
    2. +
+
+
+ {% capture js %} +// When the sketch changes, an alert shows up. +editor.change(function() { + alert("Yay!"); +}); +{% endcapture %} + 
{{ js | strip | escape }}
+ + +
diff --git a/_includes/reference/container.html b/_includes/reference/container.html new file mode 100644 index 0000000..a332de1 --- /dev/null +++ b/_includes/reference/container.html @@ -0,0 +1,14 @@ +
+

container

+

+ Returns the HTML element containing the Raphael paper object. +

+
+
+ {% capture js %} +// The container is a regular HTML element. +var container = editor.container(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
diff --git a/_includes/reference/editing.html b/_includes/reference/editing.html new file mode 100644 index 0000000..136c244 --- /dev/null +++ b/_includes/reference/editing.html @@ -0,0 +1,32 @@ +
+

editing

+

+ Sets the editing mode of the sketchpad. + The sketchpad has to be initialized as an editor. + There are three modes: +

+ + +

Parameters

+
    +
  1. mode string or boolean
    2. +
+
+
+ {% capture js %} +// When the sketchpad is in drawing mode. +editor.editing(true); + +// When the sketchpad is in viewer mode. +editor.editing(false); + +// When the sketchpad is in erase mode. +editor.editing("erase"); +{% endcapture %} + + 
{{ js | strip | escape }}
+
\ No newline at end of file diff --git a/_includes/reference/json.html b/_includes/reference/json.html new file mode 100644 index 0000000..9b29d94 --- /dev/null +++ b/_includes/reference/json.html @@ -0,0 +1,56 @@ +
+
+
+
+

json

+

+ Sets the strokes in the widget. + If the json parameter is not provided, + returns a JSON representation of the strokes. +

+ +

Parameters

+
    +
  1. json string
    2. +
+
+
+ {% capture js %} +// The viewer shows a black diagonal path. +// path parameter can be array or SVG path format, e.g., "M10,10L90,90". +viewer.json('[{' + + '"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"' + + '}]' +); + +// Returns the JSON representation of the strokes. +var json = viewer.json(); +{% endcapture %} + 
{{ js | strip | escape }}
+ + +
diff --git a/_includes/reference/paper.html b/_includes/reference/paper.html new file mode 100644 index 0000000..88c094f --- /dev/null +++ b/_includes/reference/paper.html @@ -0,0 +1,14 @@ +
+

paper

+

+ Returns the Raphael paper object. +

+
+
+ {% capture js %} +// http://raphaeljs.com describes properties of the Raphael paper object. +var paper = editor.paper(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
diff --git a/_includes/reference/pen.html b/_includes/reference/pen.html new file mode 100644 index 0000000..1ff27ac --- /dev/null +++ b/_includes/reference/pen.html @@ -0,0 +1,14 @@ +
+

pen

+

+ Returns the pen associated with the widget. +

+
+
+ {% capture js %} +// The pen has various properties that you can set. +var pen = editor.pen(); +{% endcapture %} + + 
{{ js | strip | escape }}
+
diff --git a/_includes/reference/raphael-sketchpad.html b/_includes/reference/raphael-sketchpad.html new file mode 100644 index 0000000..10f7b2e --- /dev/null +++ b/_includes/reference/raphael-sketchpad.html @@ -0,0 +1,53 @@ +
+

Raphael.sketchpad

+

+ Creates a Raphael SketchPad widget. +

+ +

Parameters

+
    +
  1. container Raphael or string
    2. +
  2. options object
    3. +
+ +

Possible options attributes

+ +
+
+ {% capture js %} +// Each of the examples creates a widget that is 100px wide and 100px high. + +// Creates an editor at the top left corner of the #editor element. +// The editor is initialized with strokes from the #data form field. +// Sketches are stored in the #data form field. +var editor = Raphael.sketchpad("editor", { + width: 100, + height: 100, + input: "#data" +}); + +// Creates a viewer at the top left corner of the #viewer element +// initialized with the stroke data. +var viewer = Raphael.sketchpad("viewer", { + width: 100, + height: 100, + 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" + }] +}); +{% endcapture %} + + 
{{ js | strip | escape }}
+
diff --git a/_includes/reference/strokes.html b/_includes/reference/strokes.html new file mode 100644 index 0000000..1ed5682 --- /dev/null +++ b/_includes/reference/strokes.html @@ -0,0 +1,56 @@ +
+
+
+
+

strokes

+

+ Sets the strokes in the widget. + If the json parameter is not provided, + returns an array of strokes. +

+ +

Parameters

+
    +
  1. strokes array
    2. +
+
+
+ {% capture js %} +// The viewer shows a black diagonal path. +// path parameter can be array or SVG path format, e.g., "M10,10L90,90". +viewer.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" +}]); + +// Returns an array of strokes. +var strokes = viewer.strokes(); +{% endcapture %} + 
{{ js | strip | escape }}
+ + +
diff --git a/index.html b/index.html new file mode 100644 index 0000000..da7f4eb --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ +--- +# Front matter so that Jekyll processes the file +--- + + + + Raphael SketchPad + + + + + + + + + + + + + + + + + + + + +
+ {% include header.html %} + + +
+ + {% include how-it-works.html %} + + {% include how-to-use-it.html %} + + {% include reference.html %} + + {% include editing.html %} + +
+ + +
+ © 2011 Raphael SketchPad by + Ian Li. + Licensed under the MIT license. +
+ +
+ +{% include analytics.html %} + + +