- Notifications
You must be signed in to change notification settings - Fork1
a web drawing board with canvas
License
BPing/crysyan
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
a web drawing board with canvas
nodejs
- npm install crysyan -g - crysyan visit http://locolhost:9001 with browser
- your.html
<!--<script src="jquery-3.1.1.min.js"></script>--><divstyle="width:1000px; height:1000px;"class="crysyan-designer"></div><!-- include the crysyan-designer.js --><!--<script src="projectPath/crysyan-designer-min.js"></script>--><scriptsrc="projectPath/js/crysyan-designer.js"></script>
- your.js
// jquery$(".crysyan-designer").CrysyanDesigner({canvas:{// pxwidth:900,height:500},},function(designer){console.dir(designer);});// another// var designer=CrysyanDesigner({// canvas: {// // px// width: 900,// height: 500// },// toolbar: {// length: 500// }// }, function(designer) {// console.dir(designer);// });// designer.appendTo(document.getElementsByClassName("crysyan-designer"));
/ --> css/ --> css html/ --> view img/ --> used to place the tool icon file js/ --> javascript fileIs not very accurate, because it is estimated base on a variety of attribute , and not really completely tested.But It can be a reference for you.
| Feature | Chrome | Firefox | IE |
|---|---|---|---|
| Turn the canvas into a picture and save | 4+ | 3.6(1.9.2) | 9+ |
| CORS enabled image | 13+ | (Gecko)8+ | No support |
| Record Canvas(video/webM) | 30+ | 30+ | No support |
You can use config for below widgets.Sets the widgets needed for a particular instance of a artboard.
config{ toolbar: { widgets: ["CursorWidget", "PencilWidget", "EraserWidget", "ImageWidget", "UndoWidget", "IndoGoWidget", "ClearWidget", "ShapeWidget", "TextWidget" ], } }pencil---PencilWidgetto write/draw shapeseraser---EraserWidgetto erase/clear specific portion of shapesimage---ImageWidgetadd external imagesuodo---UndoWidgetrevoke history of canvasindo-go---IndoGoWidgetforward revoke history of canvasclear---ClearWidgetclear canvasshape---ShapeWidgetdraw graphics（Square、Circular、Triangle）text---TextWidgetinput text
1、First of all,you need install node.js and gulp and gulp's add-ons which used in gulpfile.js.
2、You can choose which widgets you need to include,in other word, widgets that you can provide to users.
Lookgulpfile.js as follows:
widgetPath="js/widget/";// widgetsLoad = [widgetPath+"*.js"]; orwidgetsLoad=[// widget's file namewidgetPath+"cursor.js",widgetPath+"pencil.js",widgetPath+"eraser.js",widgetPath+"image.js",widgetPath+"undo.js",widgetPath+"into-go.js",widgetPath+"clear.js"];
3、build.
>gulp buildAfter build successfully.You can find a 'crysyan' folder,the JS files under this folder have been compressed, which can be used in your project, under the 'dist' folder
Include in your html file Just like that:
<!-- include the crysyan-designer-min.js.js --><!-- projectPath is the root of 'crysyan' folder --><scriptsrc="projectPath/crysyan-designer-min.js"></script>
projectPath is the root directory where the 'crysyan' project is located.
- CrysyanDesigner
CrysyanDesigner is a widget; that widget should be appended to a DOM object.This method allows you pass<body> or any other HTMLDOMElement.
designer.appendTo(document.body||document.documentElement);
The correct name forappendTo is:append-iframe to target HTML-DOM-element
If you want to remove the widget from your HTMLDOMElement.
designer.destroy();
You can get a viewCrysyanView instance from childiframe:
designer.getView();
Draw a image on a canvas as background.
1、drawDataUrl :
recommended to replace by#4(draw image-path)
vardataurl= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="designer.drawBackgroupWithImage(dataurl);
2、drawImage :
varimage=newImage()image.src="imagePath";designer.drawBackgroupWithImage(image);// designer.drawBackgroundWithImage(image);
3、drawFile :
varfile=newFile()// do somethingdesigner.drawBackgroupWithImage(file);//designer.drawBackgroundWithImage(file);
4、drawimage-path：
Usually, you need to add "../../" in front of the relative directory to roll back to the root directory where the 'crysyan' project is located
designer.drawBackgroupWithImage("../../img/a.png");//designer.drawBackgroundWithImage("../../img/a.png");
Get data-URL of your drawings!
window.open(designer.toDataURL('image/png'));
you can download the png:
Note: focus on attribute of
downloadof<a>tag
html:
<aid="download-png"download="my-file-name.png">download png</a>
javascript
$("#download-png").click(function(){document.getElementById("download-png").href=designer.toDataURL('image/png');});
GetRecordRTC of your drawings,which used to record canvas to video(video/webm).Does not supported in IE browser.First，you should setisRecord=true if you want to record.
API of RecordRTC,see:RecordRTC API Reference
example:
html:
<buttontype="button"id="start-record">start-record</button><buttonid="stop-record">stop-record</button><divid="videoTag"style="width:1000px; height:500px;">ddd</div>
javascript
varrecorder=designer.getCanvasRecorder();$("#start-record").click(function(){console.log("recording");recorder.initRecorder();recorder.startRecording();});$("#stop-record").click(function(){console.log("stop");recorder.stopRecording(function(){varblob=recorder.getBlob();varvideo=document.createElement('video');video.src=URL.createObjectURL(blob);video.setAttribute('style','height: 100%; position: absolute; top:0; left:0;z-index:9999;width:100%;');document.body.appendChild(video);video.controls=true;video.play();});});
You can access designer iframe as following:
designer.iframe.style.border='5px solid red';window.open(designer.iframe.src);
designer.iframe will benull/undefined until you callappendTo. So always use this code-block:
if(!designer.iframe){designer.appendTo(document.body);}designer.iframe.style.border='5px solid red';
- Config
The configuration of the entire project.
**Note:**The unit of length is: px.
vardesigner=CrysyanDesigner({ifrName:"",projectPath:"",isRecord:false,cssFile:"",canvas:{// pxwidth:900,height:500,historyListLen:50},toolbar:{widgetLength:50,widgets:["CursorWidget","PencilWidget","EraserWidget","ImageWidget","UndoWidget","IndoGoWidget","ClearWidget"],}}},function(designer){console.dir(designer);});
Name of iframe.You do not need to set this value if it is not necessary.Normally, the default value is OK
Path of crysyan project.
Whether to open the recording feature.Default:false.
Default:empty string,load inner css.If you not need load the css(include inner css).set the value of it to not string type
widthWidth of the canvas.heightHeight of the bottom canvas*historyListLendefault:50the most length of history 'revoke' list. Normally, the default value is OK.
widgetLengthThe length of each tool icon.widgetsThe widgets you want to use. see `build-in/widgets`. Normally, the default value is OK.
For example: add ashape's widget.
Create a fileshape.js to implement your tool's facility code ，under the folderjs/widget/.
1、the shape widget must be a replica copy fromCrysyanWidget.
(function($widget){'use strict';varCrysyanShapeWidget=$widget.clone(); ....// the name of widget type must be unique.Shape.CrysyanWidgetType="CrysyanShapeWidget";// export to windowwindow.CrysyanShapeWidget=CrysyanShapeWidget;})(CrysyanWidget);
2、CrysyanWidget
Properties:
An instance ofcrysyanCanvas with which you can draw canvas.
varctx=Shape.crysyanCanvas.playContext;
Record the previous point coordinatesprePoint.loc and eventprePoint.e
when the mouse down,isDown will be true.
Methods: can be overridden.
####mouseDown: function(e, loc) {}
when the mouse down in canvas,it will be called.e a window event object,loc point coordinates in canvas.
####mouseUp:
when the mouse up in canvas,it will be called.
####mouseMove:
when the mouse move in canvas,it will be called.
####iconClick: function(ele, e) {},
when click the widget's icon ,it will be called.ele widget's html element,e a window event object.
####iconLeave:
when click and select a new widget's icon and leave selected older ,it will be called.
Put your widget's iconshape.png under the folderimg/.
Openconfig.js and append following snippet towindow.CrysyanWidgetConfig.
ShapeWidget:{// Variable name export to windowexportVar:"CrysyanShapeWidget",// Name of js filejsFile:"shape.js",// Icon and Name of widget in toolbaricon:"shape.png",name:"shape"},
Then, append variableShapeWidget above towindow.CrysyanDefaultConfig.toolbar.widgets.
widgets:[...,"ShapeWidget",...]
Opengulpfile.js,append widgetPath+"shape.js", towidgetsLoad array,if you want to built-in.
- jQuery
- RecordRTC: Record Canvas2D.
Apache License Version 2.0
1、simple UI version.
2、draw image to canvas's backgroup and covert canvas to image（png）.
3、widgets：simple pencil、eraser、iamge、clear、revoke and anti-revoke.
feature:record canvas.
feature:UI style upgrade.
feature:
1、add shape widget.
2、second-level menu for pencil、eraser and shape widgets.
3、add touch event for canvas event.
4、via variable
historyListLen,set the historical canvas's record length.
fix:
1、tool icon: draggable=false.
fix:
1、background image scaling exceptions
- add
drawBackgroundWithImagefordrawBackgroupWithImageFor compatibility, two methods exist simultaneously - fix :
- edge background color when erasing ,exclude
pathshape of eraser. - background image scaling exception when
mode=1.
- edge background color when erasing ,exclude
- add
- add a simple text input widget
- add project icon
- publish to npm
About
a web drawing board with canvas