Canvas API manager for drawings events and collects history (Pad), User Interfaces for Pad (PadUI)
Require: jQuery version >= 2.1.1
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="drawpad.min.js"></script>
<script>
$(document).ready(function(){
// Drawpad is for contain PadUI and Pad only
// Only function it has is drawpad.get(@UI);
// When @UI is case-insensitive mode
var PadUI = drawpad.get('UI'),
Pad = drawpad.get('PAD');
// PadUI is virtual interface for call function in Pad.
// And it doesn't has any real-interface and DOM. Then
// - The PadUI is an interface environment only.
// - You must define DOM object.
// - The events will be called by element's class match the event.
// -- example: [Replay] event will active if element with replay class clicked.
// - All PadUI's event has callback function.
// -- example:
// -- PadUI.on("replay", function(status){
// -- if(status.active()){
// -- // Use this one for create one-time function
// -- // However this won't work if the event doesn't has end state.
// -- status.on("end", function(){
// -- ...
// -- });
// -- }
// -- if(status.end()){
// -- ...
// -- }
// -- });
// - The [container elements], [option container] will read an [example] class in the container and clone it to [container] class element.
// PadUI.init(@Pad, @elements)
// When @Pad is a Pad object
// @elements is an object contains all element needs.
PadUI.init(Pad, {
wrap: [Controller-Wrap],
layerContainer: [Layer-Roller],
...
});
// Pad is canvas manager.
// And it just like a controller.
// You can create your interface, virtual interface, Or use PadUI.
// - Pad also has event. However it can only accept one event.
Pad.init({
layers: [Layers-Element],
writer: [Writer-Element],
cursor: [Cursor-Element],
});
});
</script>
(Coming soon)
(Coming soon)
(Nothing yet)