crysyan

Быстрый старт

your.html

<!--<script src="jquery-3.1.1.min.js"></script>-->
<div style="width:1000px; height:1000px;" class="crysyan-designer"></div>
<!-- включите crysyan-designer.js -->
<script src="projectPath/crysyan-designer-min.js"></script>

your.js

// jQuery
$(".crysyan-designer").CrysyanDesigner({
    canvas: {
        // пикселей
        width: 900,
        height: 500
    },
}, function(designer) {
    console.dir(designer);
});
// еще один
// var designer=CrysyanDesigner({
//     canvas: {
//         // пикселей
//         width: 900,
//         height: 500
//     },
// }, function(designer) {
//     console.dir(designer);
// });
// designer.appendTo(document.getElementsByClassName("crysyan-designer"));

Справочник по API

CrysyanDesigner

`appendTo`

Метод appendTo позволяет прикрепить виджет CrysyanDesigner к объекту DOM. Этот метод принимает <body> или любой другой HTMLDOMElement.

designer.appendTo(document.body || document.documentElement);

Правильное название для appendTo: прикрепление iframe к целевому HTML-DOM-элементу.

`destroy`

Метод destroy используется для удаления виджета из вашего HTMLDOMElement.

designer.destroy();

`getView`

Метод getView позволяет получить экземпляр CrysyanView из дочернего iframe:

designer.getView();

`drawBackgroundWithImage`

Метод drawBackgroundWithImage используется для отрисовки изображения на холсте как фона.

Отрисовка DataUrl:

Рекомендовано заменить #4 (draw image-path)

var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="
designer.drawBackgroundWithImage(dataurl);

Отрисовка Image:

var image = new Image()
image.src = "imagePath";
designer.drawBackgroundWithImage(image);

Отрисовка File:

var file = new File()
// делайте что-то
designer.drawBackgroundWithImage(file);

Отрисовка image-path:

Обычно вам потребуется добавить "../../" перед относительным путем, чтобы вернуться к корневой директории проекта 'crysyan'.

designer.drawBackgroundWithImage("../../img/a.png");

`toDataURL`

Метод toDataURL позволяет получить данные-URL ваших рисунков!

window.open(designer.toDataURL('image/png'));

Вы можете скачать PNG:

Примечание: обратите внимание на атрибут download тега <a>

html:

<a id="download-png" download="my-file-name.png">скачать png</a>

javascript

$("#download-png").click(function () {
    document.getElementById("download-png").href = designer.toDataURL('image/png');
});

`getCanvasRecorder`

Метод getCanvasRecorder позволяет получить RecordRTC ваших рисунков, который используется для записи холста в видео (video/webm). Недоступно в браузере Internet Explorer.

API RecordRTC, см.: RecordRTC API Reference

пример:

html:

<button type="button" id="start-record">начать запись</button>
<button id="stop-record">остановить запись</button>
<div id="videoTag" style="width:1000px; height:500px;">ddd</div>

javascript

var recorder = designer.getCanvasRecorder();
$("#start-record").click(function () {
    console.log("запись началась");
    recorder.initRecorder();
    recorder.startRecording();
});
$("#stop-record").click(function () {
    console.log("запись завершена");
    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`

Метод iframe позволяет получить доступ к iframe дизайнеру следующим образом:

designer.iframe.style.border = '5px solid red';

window.open(designer.iframe.src);

designer.iframe будет null/undefined, пока вы не вызовете appendTo. Поэтому всегда используйте этот блок кода:

if (!designer.iframe) {
    designer.appendTo(document.body);
}
designer.iframe.style.border = '5px solid red';

Config

Конфигурация всего проекта.

Примечание: единица измерения длины - px.

var designer = CrysyanDesigner({
    ifrName: "",
    projectPath: "",
    isRecord: false,
    canvas: {
        // пикселей
        width: 900,
        height: 500
    },
    toolbar: {
        widgetLength: 50,
        widgets: [
            "CursorWidget",
            "PencilWidget",
            "EraserWidget",
            "ImageWidget",
            "UndoWidget",
            "IndoGoWidget",
            "ClearWidget"]
    }
}, function(designer) {
    console.dir(designer);
});

`ifrName`

Имя iframe. Вы не должны устанавливать это значение, если это не требуется. Обычно значение по умолчанию подходит.

`projectPath`

Путь до проекта crysyan.

`isRecord`

Флаг, указывающий, должна ли быть открыта функция записи. По умолчанию: false.

`canvas`

width

Ширина холста.

height

Высота холста.

`toolbar`

widgetLength

Длина каждого значка инструмента.

widgets

Виджеты, которые вы хотите использовать. Смотрите build-in/widgets. Обычно значение по умолчанию подходит.

OSCHINA-MIRROR/Bping-crysyan

crysyan

Быстрый старт

Справочник по API

`appendTo`

`destroy`

`getView`

`drawBackgroundWithImage`

`toDataURL`

`getCanvasRecorder`

`iframe`

`ifrName`

`projectPath`

`isRecord`

`canvas`

`toolbar`

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/Bping-crysyan .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

crysyan

Быстрый старт

Справочник по API

appendTo

destroy

getView

drawBackgroundWithImage

toDataURL

getCanvasRecorder

iframe

ifrName

projectPath

isRecord

canvas

toolbar

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/Bping-crysyan

`appendTo`

`destroy`

`getView`

`drawBackgroundWithImage`

`toDataURL`

`getCanvasRecorder`

`iframe`

`ifrName`

`projectPath`

`isRecord`

`canvas`

`toolbar`