Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
BPing committed Nov 16, 2016
1 parent 2294aa2 commit 18e66d7
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 4 deletions.
54 changes: 50 additions & 4 deletions Guidance.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,12 @@ designer.destroy();
designer.getView();
```


### `drawBackgroupWithImage`
Draw a image on a canvas as background.

draw `DataUrl` :
1、draw `DataUrl` :

recommended to replace by`#4`(`draw image-path`)
```javascript
var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIr
GAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn
Expand All @@ -72,20 +73,27 @@ EgqPcT12VgAAAABJRU5ErkJggg=="
designer.drawBackgroupWithImage(dataurl);
```

draw `Image` :
2、draw `Image` :
```javascript
var image=new Image()
image.src="imagePath";
designer.drawBackgroupWithImage(image);
```

draw `File` :
3、draw `File` :
```javascript
var file=new File()
// do something
designer.drawBackgroupWithImage(file);
```

4、draw `image-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
```javascript
designer.drawBackgroupWithImage("../../img/a.png");
```

### `toDataUrl`
Get data-URL of your drawings!

Expand All @@ -109,6 +117,41 @@ $("#download-png").click(function () {
});
```

### `getCanvasRecorder`
Get `RecordRTC` of your drawings,which used to record canvas to video(video/webm).Does not supported in IE browser.

API of RecordRTC,see:[RecordRTC API Reference](http://recordrtc.org/RecordRTC.html)

`example:`

`html`:
```html
<button type="button" id="start-record">start-record</button>
<button id="stop-record">stop-record</button>
<div id="videoTag" style="width:1000px; height:500px;">ddd</div>
```
`javascript`
```javascript
var recorder = designer.getCanvasRecorder();
$("#start-record").click(function () {
console.log("recording");
recorder.initRecorder();
recorder.startRecording();
});
$("#stop-record").click(function () {
console.log("stop");
recorder.stopRecording(function() {
var blob = recorder.getBlob();
var video = 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();
});
});
```

### `iframe`
You can access designer iframe as following:

Expand All @@ -134,6 +177,7 @@ The configuration of the entire project.
var designer=CrysyanDesigner({
ifrName:"",
projectPath:"",
isRecord:false,
canvas: {
// px
width: 900,
Expand Down Expand Up @@ -163,6 +207,8 @@ You do not need to set this value if it is not necessary.
Normally, the default value is OK
### `projectPath`
Path of crysyan project.
### `isRecord`
Whether to open the recording feature.Default:`false`.
### `canvas`
* `width`

Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ $("#download-png").click(function () {

### `getCanvasRecorder`
Get `RecordRTC` of your drawings,which used to record canvas to video(video/webm).Does not supported in IE browser.
First,you should set `isRecord=true` if you want to record.

API of RecordRTC,see:[RecordRTC API Reference](http://recordrtc.org/RecordRTC.html)

Expand Down

0 comments on commit 18e66d7

Please sign in to comment.