Слияние кода завершено, страница обновится автоматически
Веб-платформа для рисования с использованием canvas
Домашняя страница: https://home.cbping.vip/crysyan/
NodeJS
- npm install crysyan -g
- crysyan
Откройте http://localhost:9001 в браузере
<!--<script src="jquery-3.1.1.min.js"></script>-->
<div style="width:1000px; height:1000px;" class="crysyan-designer"></div>
<!-- include the crysyan-designer.js -->
<!--<script src="projectPath/crysyan-designer-min.js"></script>-->
<script src="projectPath/js/crysyan-designer.js"></script>
// jQuery
$(".crysyan-designer").CrysyanDesigner({
canvas: {
// px
width: 900,
height: 500
},
}, function(designer) {
console.dir(designer);
});
// Еще один
// 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/ --> Представление
img/ --> Используется для хранения файлов иконок инструментов
js/ --> Файлы JavaScript
Не очень точно, так как это основано на различных атрибутах и не было полностью протестировано. Но это может служить вам в качестве ориентира.
| Функциональность | Chrome | Firefox | IE |
|---|---|---|---|
| Преобразование canvas в изображение и его сохранение | 4+ | 3.6(1.9.2) | 9+ |
| Поддержка CORS для изображений | 13+ | (Gecko)8+ | Нет поддержки |
| Запись canvas (видео/webM) | 30+ | 30+ | Нет поддержки |
Вы можете использовать конфигурацию для следующих виджетов. Устанавливает виджеты, необходимые для конкретной экземпляризации доски рисования.
config{
toolbar: {
widgets:
["CursorWidget",
"PencilWidget",
"EraserWidget",
"ImageWidget",
"UndoWidget",
"IntoGoWidget",
"ClearWidget",
"ShapeWidget",
"TextWidget"
],
}
}
Ручка --- PencilWidget для рисования/написания фигурЛастик --- EraserWidget для стирания/очистки конкретной части фигурыИзображение --- ImageWidget для добавления внешних изображенийОтмена --- UndoWidget для отмены истории canvasПовтор --- IntoGoWidget для повтора отмены истории canvasОчистка --- ClearWidget для очистки canvasФигура --- ShapeWidget для рисования графики (квадрат, круг, треугольник)Текст --- TextWidget для ввода текстаСначала вам нужно установить Node.js и Gulp и плагины Gulp, используемые в gulpfile.js.
Вы можете выбрать, какие виджеты вы хотите включить, другими словами, виджеты, которые вы предоставляете пользователям.
Просмотрите gulpfile.js ниже:
widgetPath="js/widget/";
// widgetsLoad = [widgetPath+"*.js"]; или
widgetsLoad = [
// имя файла виджета
widgetPath+"cursor.js",
widgetPath+"pencil.js",
widgetPath+"eraser.js",
widgetPath+"image.js",
widgetPath+"undo.js",
widgetPath+"into-go.js",
widgetPath+"clear.js"];
>gulp build
После успешной сборки. Вы найдёте папку 'crysyan', где JS-файлы этой папки были сжаты и могут быть использованы в вашем проекте, находящиеся в папке 'dist'.
Добавьте в ваш html-файл вот так:
<!-- include the crysyan-designer-min.js.js -->
<!-- projectPath is the root of 'crysyan' folder -->
<script src="projectPath/crysyan-designer-min.js"></script>
projectPath является корневой директорией, где расположен проект 'crysyan'.
appendTo
CrysyanDesigner является виджетом; этот виджет следует прикрепить к объекту DOM.
Этот метод позволяет передать <body> или любой другой HTMLDOMElement.
designer.appendTo(document.body || document.documentElement);
Правильное название для appendTo — append-iframe to target HTML-DOM-element.
destroy
Если вы хотите удалить виджет из вашего HTMLDOMElement.
designer.destroy();
getView
Вы можете получить экземпляр CrysyanView из дочернего iframe:
designer.getView();
drawBackgroupWithImage или drawBackgroundWithImage
Отрисовка изображения на canvas в качестве фона.
DataUrl:рекомендовано заменить #4(отрисовка пути изображения)
var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="
designer.drawBackgroupWithImage(dataurl);
Изображение:var image=new Image()
image.src="pathToImage";
designer.drawBackgroupWithImage(image);
// designer.drawBackgroundWithImage(image);
Файл:var file=new File()
// делайте что-то
designer.drawBackgroupWithImage(file);
//designer.drawBackgroundWithImage(file);
pathToImage:Обычно, вам нужно добавить "../../" перед относительным путём, чтобы вернуться к корневому каталогу проекта 'crysyan'.
designer.drawBackgroupWithImage("../../img/a.png");
//designer.drawBackgroundWithImage("../../img/a.png");
toDataUrl
Получите data-url ваших рисунков!
window.open(designer.toDataURL('image/png'));
вы можете скачать png:
Примечание: обратите внимание на атрибут
downloadтега<a>.
html:
<a id="download-png" download="my-file-name.png">download png</a>
javascript
$("#download-png").click(function () {
document.getElementById("download-png").href=designer.toDataURL('image/png');
});
getCanvasRecorder
Получите RecordRTC ваших рисунков, который используется для записи canvas в видео (видео/webm). Не поддерживается в браузерах Internet Explorer.
Во-первых, вам следует установить isRecord=true, если вы хотите записывать.
API RecordRTC, см.: RecordRTC API Reference
пример:
html:
<button type="button" id="start-record">start-record</button>
<button id="stop-record">stop-record</button>
<div id="videoTag" style="width:1000px; height:50 Yöntem;">ddd</div>
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
Вы можете получить доступ к 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';
Конфигурация всего проекта.
Примечание: единица измерения длины: px.
var designer=CrysyanDesigner({
ifrName:"",
projectPath:"",
isRecord:false,
cssFile:"",
canvas: {
// px
width: 900,
height: 500,
historyListLen:50
},
toolbar: {
widgetLength: 50,
widgets:
[
"CursorWidget",
"PencilWidget",
"EraserWidget",
"ImageWidget",
"UndoWidget",
"IntoGoWidget",
"ClearWidget"],
}
}
}, function(designer) {
console.dir(designer);
});
ifrName
Имя iframe. Вы не должны устанавливать это значение, если это не требуется. Обычно значение по умолчанию подходит.
projectPath
Путь к проекту 'crysyan'.### isRecord
Включено ли использование функции записи. По умолчанию: false.
cssFile
По умолчанию: пустая строка, загружается внутренний CSS. Если вы не хотите загружать CSS (включая внутренний CSS), установите это значение в тип данных отличный от строки.
canvas
width
Ширина canvas.
height
Высота canvas.
historyListLen по умолчанию: 50
Максимальная длина списка истории 'отмены'. Обычно значение по умолчанию подходит.
toolbar
widgetLength
Длина каждого инструмента.
widgets
Виджеты, которые вы хотите использовать. Смотрите `встроенные возможности/виджеты`.
Обычно значение по умолчанию подходит.
Допустим, добавляем виджет формы.
Создайте файл shape.js для реализации кода вашего инструмента, под папкой js/widget/.
CrysyanWidget.(function($widget) {
'use strict';
var CrysyanShapeWidget = $widget.clone();
...
// имя типа виджета должно быть уникальным.
Shape.CrysyanWidgetType = "CrysyanShapeWidget";
// экспорт в window
window.CrysyanShapeWidget = CrysyanShapeWidget;
})(CrysyanWidget);
CrysyanWidgetСвойства:
crysyanCanvas
Экземпляр crysyanCanvas, с которым можно рисовать canvas.
var ctx = Shape.crysyanCanvas.playContext;
prePoint
Записывает координаты предыдущего точки prePoint.loc и событие prePoint.e.
isDown
при нажатии мыши, isDown становится истинным.
Методы: могут быть переопределены.
mouseDown: function(e, loc) {}когда мышь нажата в canvas, она будет вызвана. e — объект события окна, loc — координаты точки в canvas.
mouseUp:когда мышь отпущена в canvas, она будет вызвана.
mouseMove:когда мышь перемещается в canvas, она будет вызвана.
iconClick: function(ele, e) {},когда кликнули по иконке виджета, она будет вызвана. ele — элемент виджета, e — объект события окна.
iconLeave:когда выбрали новый виджет и покинули старый выбранный, он будет вызван.
Поместите иконку вашего виджета shape.png под папкой img/.
Откройте config.js и добавьте следующую строчку к window.CrysyanWidgetConfig.
ShapeWidget: {
// имя переменной экспорта в window
exportVar: "CrysyanShapeWidget",
// имя файла js
jsFile: "shape.js",
// иконка и имя виджета в панели инструментов
icon: "shape.png",
name: "shape"
},
Затем, добавьте переменную ShapeWidget выше к window.CrysyanDefaultConfig.toolbar.widgets.
widgets: [...,"ShapeWidget",...]
Откройте gulpfile.js, добавьте widgetPath+"shape.js", к массиву widgetsLoad, если вы хотите включить его.
Также стоит отметить, что все остальные части документации остаются без изменений, поскольку они содержат специфическую разметку, которую необходимо сохранять в исходном виде.
Apache License Version 2.0
- Простой интерфейс пользователя.
- Отрисовка изображения на фоне канваса и конвертация канваса в изображение (png).
- Инструменты: простая карандаш, ластик, изображение, очистка, отмена действия и антимолния.
Новая функциональность: запись канваса.
Новая функциональность: Обновление стиля интерфейса.
Новая функциональность:
- Добавлен инструмент формы.
- Вторичное меню для карандаша, ластика и инструмента формы.
- Добавлена поддержка событий прикосновения для канваса.
- Через переменную
historyListLenустановлена длина записи истории канваса.
Исправления:
- Инструменты: возможность перемещения (
draggable) = false.
Исправления:
- Исключения масштабирования фона при использовании изображения.
drawBackgroundWithImage для совместимости с методом drawBackgroupWithImage.path ластика.mode=1.Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )