jspaint
1.0.0
JS PaintPixel-идеальное веб-римейк MS Paint и многое другое ... попробуйте! Затем присоединяйтесь к серверу Discord, чтобы поделиться своим искусством!
JS Paint воссоздает каждый инструмент и меню MS Paint, и даже малоизвестные функции в высокой степени верности.
Он поддерживает темы, дополнительные типы файлов и функции доступности, такие как режим глаз и распознавание речи.
Ах, да, старая старая краска. Не тот, у которого есть ленты или новый скеоморфный, с интерфейсом, который может занять почти половину экрана. (И не даже более новая краска 3d.)
Windows 95, 98 и XP были золотыми годами краски. У вас был ящик для инструментов и цветная коробка, цвет переднего плана и цвет фона, и это было все, что вам нужно.
Все было просто.
Но мы хотим отменить более трех действий. Мы хотим редактировать прозрачные изображения. Мы не можем просто продолжать использовать старую краску.
Вот почему я делаю JS Paint. Я хочу принести старую добрую краску в современную эпоху.
AnyPalette.js.)Редактирование функций:
Разные улучшения:
Несколько вещей с инструментами еще не сделаны. См. Todo.md
Полная поддержка буфера обмена в веб -приложении требует браузера, поддерживающего API Async Boolboard API с изображениями, а именно Chrome 76+ на момент написания.
В других браузерах вы все еще можете скопировать с помощью Ctrl+C , вырезать Ctrl+X и вставить с Ctrl+V , но данные, скопированные с JS Paint, могут быть вставлены только в другие случаи JS Paint. Внешние изображения могут быть вставлены.
В отличие от MS Paint, вы можете использовать Edit> Undo для возврата цвета или снижения качества от сбережений. Это не отменяет сохранение файла, но позволяет вам сохранять в другом формате с более высоким качеством, используя файл> Сохранить как .
Рекомендуется сохранение как PNG, так как он дает небольшие размеры файлов при сохранении полного качества.
| Расширение файла | Имя | Читать | Писать | Читать палитру | Написать палитру |
|---|---|---|---|---|---|
| .png | Пнн | ✅ | ✅ | ||
| .bmp, .dib | Монохромная растровая карта | ✅ | ✅ | ✅ | |
| .bmp, .dib | 16 Color Bitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 256 Color Bitmap | ✅ | ✅ | ✅ | |
| .bmp, .dib | 24-битная растровая карта | ✅ | ✅ | N/a | N/a |
| .tif, .tiff, .dng, .cr2, .nef | Тифф (загружает первую страницу) | ✅ | ✅ | ||
| PDF (загружает первую страницу) | ✅ | ||||
| .webp | Webp | ||||
| .gif | Гифка | ||||
| .jpeg, .jpg | JPEG | N/a | N/a | ||
| .svg | SVG (только размер по умолчанию) | ||||
| .ico | ICO (только размер по умолчанию) |
Возможности, помеченные в настоящее время, оставляются в браузере для поддержки или нет. Если «запись» помечена, формат появится в раскрывающемся списке типа файла, но может не работать при попытке сохранить. Для открытия файлов см. В таблице поддержки формата изображений Wikipedia для получения дополнительной информации.
Возможности, помеченные в ближайшее время, и не применимы.
«Читать палитра» относится к автоматической загрузке цветов в коробку цветов (из индексированного цветного изображения), а «палитра записи» относится к написанию индексированного цветового изображения.
С цветами> Сохранить цвета и цвета> Получить цвета, которые вы можете сохранить, и загружать цвета во многих различных форматах, для совместимости с широким спектром программ.
Если вы хотите добавить обширную поддержку палитры в другое приложение, я сделал эту функциональность доступной в виде библиотеки: Anypalette.js
| Расширение файла | Имя | Программы | Читать | Писать |
|---|---|---|---|---|
| .pal | Рифф -палитра | MS Paint для Windows 95 и Windows NT 4.0 | ✅ | ✅ |
| .gpl | Палитра Gimp | Gimp, Inkscape, Krita, Kolourpaint, Scribus, Cinepaint, MyPaint | ✅ | ✅ |
| .aco | Образвы на салат | Adobe Photoshop | ✅ | ✅ |
| .ase | Adobe Swatch Exchange | Adobe Photoshop, Indesign и Illustrator | ✅ | ✅ |
| .текст | PAINT.NET PALETER | Paint.net | ✅ | ✅ |
| .действовать | Adobe Color Table | Adobe Photoshop и иллюстратор | ✅ | ✅ |
| .pal, .pppalette | Paint Shop Pro Palette | Paint Shop Pro (Jasc Software / Corel) | ✅ | ✅ |
| .hpl | Домашняя палитра | Allaire Homesite / Macromedia Coldfusion | ✅ | ✅ |
| .cs | Colorschemer | Colorschemer Studio | ✅ | |
| .pal | Палитра Starcraft | Starcraft | ✅ | ✅ |
| .wpe | Starcraft Lons Palette | Starcraft | ✅ | ✅ |
| .sketchpalette | Палитра эскизов | Набросок | ✅ | ✅ |
| .spl | Скенцил палитра | Skencil (ранее называемый Sketch) | ✅ | ✅ |
| .soc | Staroffice Colors | Staroffice, OpenOffice, LibreOffice | ✅ | ✅ |
| .colors | Коллекция цветов Kolourpaint | Kolourpaint | ✅ | ✅ |
| .colors | Плазменная цветовая схема рабочего стола | KDE Plasma Desktop | ✅ | |
| .тема | Тема Windows | Windows Desktop | ✅ | |
| .temepack | Тема Windows | Windows Desktop | ✅ | |
| .css, .scss, .styl | Каскадные таблицы стилей | Веб -браузеры / веб -страницы | ✅ | ✅ |
| .html, .svg, .js | Любые текстовые файлы с цветами CSS | Веб -браузеры / веб -страницы | ✅ |
В палитре есть черно -белый режим с узорами , а не с цветами, к которым вы можете получить из изображения> Атрибуты ...
Вы можете перетаскивать цветную коробку и ящик для инструментов, если вы возьмете их в нужное место. Вы даже можете вытащить их в маленькие окна. Вы можете приставать к окнам обратно в сторону, дважды щелкнув их на стержнях.
В дополнение к левому щелчке «Цвет переднего плана» и «Цвет фона» щелкните правой кнопкой мыши, есть третий цвет, который вы можете получить, удерживая CTRL во время рисования. Он начинается без цвета, поэтому вам нужно удерживать CTRL и сначала выбрать цвет. Причудливая вещь в этом цветовом слоте - вы можете нажать и отпустить Ctrl , чтобы переключать цвета во время рисования .
Вы можете применить преобразования изображения, такие как Flip/rowte, растяжение/перекосив или инвертировать (в меню изображения) либо на все изображение, либо на выбор. Попробуйте писать с помощью инструмента Select Select, а затем выполнить изображение> Invert
Эти советы и хитрости с учебника для MS Paint также работают в JS Paint:
Paint JS может быть установлен в качестве прогрессивного веб -приложения (PWA), хотя еще не работает в автономном режиме. Ищите подсказку установки в адресной панели.
Особенности PWA:
Отсутствуют функции:
Я также встроил его в настольное приложение с электроном и электронной кузницей. Вы можете скачать его со страницы релизов.
Функции электронного приложения:
jspaint path/to/file.png в терминалеeditor_window.on("close") вызовов preventDefault и может быть функцией, но необходимо показать/сосредоточиться на окнеКлонировать репо.
Установите node.js, если его нет, то откройте командную строку / терминал в каталоге проекта.
Запустите npm run lint чтобы проверить наличие ошибок правописания, ошибок введите, проблемы в стиле кода и другие проблемы.
Запустите npm run format , чтобы автоматически исправить проблемы форматирования или npx eslint --fix , чтобы исправить все автоматические проблемы.
Правила форматирования настроены для совместимости со встроенным форматером VS-кода.
Запустите npm test для запуска тестов на основе браузеров с Cypress. (К сожалению, это медленно запускаться и запускать тесты.)
Запустите npm run accept , чтобы принять любые визуальные изменения. Это, к сожалению, перезапускает все тесты, вместо того, чтобы принимать результаты предыдущего теста, так что вы можете получить другие результаты, чем предыдущий тест. Если вы используете настольный компьютер GitHub, вы можете просматривать различия изображений в четырех разных режимах.
Чтобы открыть пользовательский интерфейс Cypress, сначала запустите npm run test:start-server , затем одновременно npm run cy:open
Тесты также проводятся в непрерывной интеграции с Трэвисом CI.
После того, как вы установили зависимости с npm i , используйте npm run dev чтобы запустить сервер, перезагружающий живой.
Убедитесь, что любые важные стили идут в layout.css . При обновлении layout.css генерируется версия таблицы стиля справа налево, используя RTLCSS.
Вы должны проверить макет RTL, изменив язык на арабский или иврит. Перейдите в Extras> Language> العربية или עברית .
См. Директивы управления для управления макетом RTL.
Существует задача запуска VS -кода для прикрепления к Chrome для отладки. Смотрите .vscode/launch.json
npm inpm run electron:startЭлектрон-дебуг включен, поэтому вы можете использовать F5 / Ctrl+R для перезагрузки и F12 / Ctrl+Shift+I , чтобы открыть DevTools.
Вы можете построить для производства с помощью npm run electron:make
Существует задача запуска VS -кода для отладки электронного основного процесса. Для процесса рендеринга вы можете использовать встроенные Chrome Devtools.
JS Paint можно развернуть с помощью обычного веб -сервера.
Ничего не нужно собирать.
Необязательно, вы можете настроить сервер CORS в любом месте, для загрузки изображений из Интернета, если вы вставьте URL -адрес в JS Paint, или использовать функцию #load:<URL> с изображениями, которые не находятся на одном домене.
По умолчанию он будет использовать экземпляр COR в любом месте, настроенный для работы с JSpaint.App.
Он размещен бесплатно на Heroku, и вы можете настроить свой собственный экземпляр и настроить его для работы со своим собственным доменом.
Вам придется найти и заменить https://jspaint-cors-proxy.herokuapp.com на свой собственный URL.
Многопользовательская поддержка в настоящее время опирается на Firebase, которая не является программным обеспечением с открытым исходным кодом.
Вы можете создать экземпляр базы данных Firebase Realtime и отредактировать JS Paint sessions.js , чтобы указать на него, заменив config , передаваемую на initializeApp с конфигурацией из консоли Firebase при настройке веб -приложения.
Но многопользовательский режим до сих пор очень дрянный. Это должно быть заменено чем -то с открытым исходным кодом, более безопасным, более эффективным и более надежным.
Добавьте это в свой HTML:
< iframe src =" https://jspaint.app " width =" 100% " height =" 100% " > </ iframe > Вы можете загрузить его изображение из URL, добавив #load:<URL> в URL.
< iframe src =" https://jspaint.app#load:https://jspaint.app/favicon.ico " width =" 100% " height =" 100% " > </ iframe >Если вы хотите управлять JS Paint, как она сохраняет/загружает файлы или доступ к Canvas напрямую, существует нестабильный API.
Сначала вам нужно клонировать репо, чтобы вы могли указать на свою местную iframe на свою местную копию.
Локальная копия JS Paint должна быть размещена на том же веб -сервере, что и содержащая страница, или, более конкретно, она должна совместно использовать то же происхождение.
Наличие локальной копии также означает, что вещи не сломаются в любое время, когда API меняется.
Если краска JS клонирована в папку, называемую jspaint , которая живет в той же папке, что и страница, которую вы хотите встроить, вы можете использовать это:
< iframe src =" jspaint/index.html " id =" jspaint-iframe " width =" 100% " height =" 100% " > </ iframe > Если он живет где -то еще, вам может потребоваться добавить ../ к началу пути, чтобы подняться на уровень. Например, src="../../apps/jspaint/index.html" . Вы также можете использовать абсолютный URL, например, src="https://example.com/cool-apps/jspaint/index.html" .
Вы можете переопределить диалоги для сохранения и открытия файлов с помощью API JS Paint systemHooks .
< script >
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
// Wait for systemHooks object to exist (the iframe needs to load)
waitUntil ( ( ) => jspaint . systemHooks , 500 , ( ) => {
// Hook in
jspaint . systemHooks . showSaveFileDialog = async ( { formats , defaultFileName , defaultPath , defaultFileFormatID , getBlob , savedCallbackUnreliable , dialogTitle } ) => { ... } ;
jspaint . systemHooks . showOpenFileDialog = async ( { formats } ) => { ... } ;
jspaint . systemHooks . writeBlobToHandle = async ( save_file_handle , blob ) => { ... } ;
jspaint . systemHooks . readBlobFromHandle = async ( file_handle ) => { ... } ;
} ) ;
// General function to wait for a condition to be met, checking at regular intervals
function waitUntil ( test , interval , callback ) {
if ( test ( ) ) {
callback ( ) ;
} else {
setTimeout ( waitUntil , interval , test , interval , callback ) ;
}
}
</ script >Blob представляет содержимое файла в памяти.
Ручка файла - это все, что может идентифицировать файл. Вы можете владеть этой концепцией и определить, как идентифицировать файлы. Это может быть что угодно, от индекса до массива, до идентификатора файла Dropbox, до URL -адреса IPFS, до пути файла. Это может быть любой тип, или, может быть, это должно быть строкой, я забываю.
После того, как у вас есть концепция ручки файла, вы можете реализовать сборщики файлов с помощью системных крючков и функций для чтения и записи файлов.
| Командование | Крючки используются |
|---|---|
| Файл> Сохранить как | systemHooks.showSaveFileDialog , затем, когда файл выбирается, systemHooks.writeBlobToHandle |
| Файл> Открыть | systemHooks.showOpenFileDialog , затем, когда файл выбирается, systemHooks.readBlobFromHandle |
| Файл> Сохранить | systemHooks.writeBlobToHandle (или такой же, как файл> Сохранить, как будто файл еще не открыт) |
| РЕДАКТИРОВАТЬ> КОПИ | systemHooks.showSaveFileDialog , затем, когда файл выбирается, systemHooks.writeBlobToHandle |
| Редактировать> вставьте из | systemHooks.showOpenFileDialog , затем, когда файл выбирается, systemHooks.readBlobFromHandle |
| Файл> установить как обои (плитки) | systemHooks.setWallpaperTiled если это определено, Else systemHooks.setWallpaperCentered если определено, иначе, так же, как файл> Сохранить как |
| Файл> установить как обои (центрированные) | systemHooks.setWallpaperCentered если определено, иначе, как файл> Сохранить как |
| Эксплуата | То же, что и файл> Сохранить как |
| Цвета> Сохранить цвета | То же, что и файл> Сохранить как |
| Цвета> Получить цвета | То же, что и File> Open |
Чтобы запустить приложение с файла, загруженного для редактирования, дождитесь загрузки приложения, а затем вызовите systemHooks.readBlobFromHandle с помощью дескриптора файла, и сообщите приложению загрузить этот каплей файла.
const file_handle = "initial-file-to-load" ;
systemHooks . readBlobFromHandle ( file_handle ) . then ( file => {
if ( file ) {
contentWindow . open_from_file ( file , file_handle ) ;
}
} , ( error ) => {
// Note: in some cases, this handler may not be called, and instead an error message is shown by readBlobFromHandle directly.
contentWindow . show_error_message ( `Failed to open file ${ file_handle } ` , error ) ;
} ) ;Это неуклюже, и в будущем может быть параметр строки запроса для загрузки начального файла по его ручке. (Примечание для себя: каким -то образом ему нужно будет ждать зарегистрированных крючков системы.)
Уже есть параметр строки запроса для загрузки с URL:
< iframe src =" https://jspaint.app?load:SOME_URL_HERE " > </ iframe >Но это не настроит ручку файла для сохранения.
Вы можете определить две функции, чтобы установить обои, которые будут использоваться File> установить как обои (плитки) и файл> установить как обои (центрированные) .
systemHooks.setWallpaperTiled = (canvas) => { ... };systemHooks.setWallpaperCentered = (canvas) => { ... }; Если вы определите только systemHooks.setWallpaperCentered , JS Paint попытается угадать размеры вашего экрана и плюшевая изображение, применив его, вызывая функцию systemHooks.setWallpaperCentered .
Если вы не указаете systemHooks.setWallpaperCentered , JS Paint по умолчанию будет сохранена файла ( <original file name> wallpaper.png ) с использованием systemHooks.showSaveFileDialog и systemHooks.writeBlobToHandle .
Вот полный пример, поддерживающий постоянные индивидуальные обои в качестве фона на содержащей странице:
const wallpaper = document . querySelector ( "body" ) ; // or some other element
jspaint . systemHooks . setWallpaperCentered = ( canvas ) => {
canvas . toBlob ( ( blob ) => {
setDesktopWallpaper ( blob , "no-repeat" , true ) ;
} ) ;
} ;
jspaint . systemHooks . setWallpaperTiled = ( canvas ) => {
canvas . toBlob ( ( blob ) => {
setDesktopWallpaper ( blob , "repeat" , true ) ;
} ) ;
} ;
function setDesktopWallpaper ( file , repeat , saveToLocalStorage ) {
const blob_url = URL . createObjectURL ( file ) ;
wallpaper . style . backgroundImage = `url( ${ blob_url } )` ;
wallpaper . style . backgroundRepeat = repeat ;
wallpaper . style . backgroundPosition = "center" ;
wallpaper . style . backgroundSize = "auto" ;
if ( saveToLocalStorage ) {
const fileReader = new FileReader ( ) ;
fileReader . onload = ( ) => {
localStorage . setItem ( "wallpaper-data-url" , fileReader . result ) ;
localStorage . setItem ( "wallpaper-repeat" , repeat ) ;
} ;
fileReader . onerror = ( ) => {
console . error ( "Error reading file (for setting wallpaper)" , file ) ;
} ;
fileReader . readAsDataURL ( file ) ;
}
}
// Initialize the wallpaper from localStorage, if it exists
try {
const wallpaper_data_url = localStorage . getItem ( "wallpaper-data-url" ) ;
const wallpaper_repeat = localStorage . getItem ( "wallpaper-repeat" ) ;
if ( wallpaper_data_url ) {
fetch ( wallpaper_data_url ) . then ( response => response . blob ( ) ) . then ( file => {
setDesktopWallpaper ( file , wallpaper_repeat , false ) ;
} ) ;
}
} catch ( error ) {
console . error ( error ) ;
}Это немного рекурсивно, извините; Это, вероятно, можно сделать проще. Как, просто используя URL -адреса данных. (На самом деле, я думаю, что я хотел использовать URL -адреса Blob, чтобы он не раздувал инспектора DOM супер длинным URL. Что на самом деле является ошибкой Devtools UX. Может быть, они улучшили это?)
Вы можете загрузить файл, который имеет желаемые измерения. На данный момент нет особого API.
См. Загрузка файла изначально.
Вы можете изменить тему программно:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;Но это сломает предпочтения пользователя.
Меню «Эксплуатация» по -прежнему будет работать, но предпочтение не будет сохраняться при перезагрузке страницы.
В будущем может быть параметр строки запроса, чтобы указать тему по умолчанию. Вы также можете разобраться с тем, чтобы изменить тему по умолчанию.
Похоже на тему, вы можете попытаться изменить язык программно:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_language ( "ar" ) ;Но это на самом деле попросит пользователя перезагрузить приложение для изменения языков.
Языковое меню «Эксплуатация» все равно будет работать, но пользователь будет беспокоиться об изменении языка каждый раз, когда они перезагружают страницу.
В будущем может быть параметр строки запроса, чтобы указать язык по умолчанию. Вы также можете разобраться в том, чтобы изменить язык по умолчанию.
Еще не поддерживается. Вы могли бы распаковать JSpaint и добавить свои собственные меню.
Благодаря доступу к холстам вы можете реализовать живой предварительный просмотр вашего рисунка, например, обновить текстуру в игровом двигателе в реальном времени.
var iframe = document . getElementById ( "jspaint-iframe" ) ;
// contentDocument here refers to the webpage loaded in the iframe, not the image document loaded in jspaint.
// We're just reaching inside the iframe to get the canvas.
var canvas = iframe . contentDocument . querySelector ( ".main-canvas" ) ; Рекомендуется не использовать это для загрузки документа, поскольку он не изменит заголовок документа и не сбросит историю Undo/Refo, среди прочего. Вместо этого используйте open_from_file .
Если вы хотите сделать кнопки или другой пользовательский интерфейс, чтобы сделать что -то с документом, вы должны (вероятно) сделать их отказываемым. Это очень просто, просто оберните свое действие в призыв к undoable .
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
var icon = new Image ( ) ;
icon . src = "some-folder/some-image-15x11-pixels.png" ;
jspaint . undoable ( {
name : "Seam Carve" ,
icon : icon , // optional
} , function ( ) {
// do something to the canvas
} ) ; systemHooks.showSaveFileDialog({ formats, defaultFileName, defaultPath, defaultFileFormatID, getBlob, savedCallbackUnreliable, dialogTitle })Определите эту функцию, чтобы переопределить диалог сохранения по умолчанию. Это используется как для сохранения изображений, так и для палитры, так и для анимации.
Аргументы:
formats : массив объектов, представляющих типы файлов, со следующими свойствами:formatID : строка, которая уникально идентифицирует формат (может быть такой же, как mimeType )mimeType (необязательно): назначенный тип медиа в формате файла, например "image/png" (форматы палитры не имеют этого свойства)name : имя формата файла, например, "WebP"nameWithExtensions : имя формата файла, за которым следует список расширений, например "TIFF (*.tif;*.tiff)"extensions : массив расширений файлов, исключая точку, сначала предпочтительное расширение, например, ["bmp", "dib"]defaultFileName (необязательно): предлагаемое имя файла, например "Untitled.png" или имя открытого документа.defaultPath (необязательно): дескриптор файла для открытого документа, поэтому вы можете легко сохранить в той же папке. Неправильно: это не может быть пути, это зависит от того, как вы определяете ручки файлов.defaultFileFormatID (необязательно): formatID формата файла для выбора по умолчанию.async function getBlob(formatID) : функция, которую вы вызываете, чтобы получить файл в одном из поддерживаемых форматов. Это требует formatID и дает Promise , которое разрешает с помощью Blob представляющее содержимое файла для сохранения.function savedCallbackUnreliable({ newFileName, newFileFormatID, newFileHandle, newBlob }) (необязательно): функция, которую вы звоните, когда пользователь сохранил файл. newBlob должен прийти от getBlob(newFileFormatID) .dialogTitle (необязательно): заголовок для диалога сохранения. Обратите внимание на инверсию управления здесь: JS Paint вызывает вашу функцию systemHooks.showSaveFileDialog , а затем вы называете функцию getBlob от JS Paint. После того, как getBlob решается, вы можете вызвать функцию savedCallbackUnreliable , которая определяется JS Paint. (Надеюсь, я смогу прояснить это в будущем.)
Также обратите внимание, что эта функция отвечает за сохранение файла, а не только на выбор места сохранения. Вы можете повторно использовать свою функцию systemHooks.writeBlobToHandle , если она полезна.
systemHooks.showOpenFileDialog({ formats })Определите эту функцию, чтобы переопределить диалоговое окно по умолчанию. Это используется для открытия изображений и палитров.
Аргументы:
formats : так же, как systemHooks.showSaveFileDialog Обратите внимание, что эта функция отвечает за загрузку содержимого файла, а не только для выбора файла. Вы можете повторно использовать свою функцию systemHooks.readBlobFromHandle , если она полезна.
systemHooks.writeBlobToHandle(fileHandle, blob)Определите эту функцию, чтобы сообщить JS Paint, как сохранить файл.
Аргументы:
fileHandle : Руководство файла, определяемое вашей системой, представляющая файл для записи.blob : Blob представляющий содержимое файла для сохранения.Возвращает:
Promise , что разрешается с true , если файл определенно был успешно сохранен, false если произошла ошибка, или отменен пользователь, или undefined если он неизвестен, был ли файл успешно сохранен, как в случае загрузки файлов с <a href="..." download="..."> . Обещание не должно отвергать; Ошибки следует обрабатывать, показывая сообщение об ошибке и возвращая false . systemHooks.readBlobFromHandle(fileHandle)Определите эту функцию, чтобы сообщить JS Paint, как загрузить файл.
Аргументы:
fileHandle : Руководство файла, определяемое вашей системой, представляющая файл для чтения. systemHooks.setWallpaperTiled(canvas)Определите эту функцию, чтобы сообщить JS Paint, как установить обои. См. Интегрирующий набор как обои для примера.
Аргументы:
canvas : HTMLCanvasElement с изображением, чтобы установить в качестве обоев. systemHooks.setWallpaperCentered(canvas)Определите эту функцию, чтобы сообщить JS Paint, как установить обои. См. Интегрирующий набор как обои для примера.
Аргументы:
canvas : HTMLCanvasElement с изображением, чтобы установить в качестве обоев. undoable({ name, icon }, actionFunction)Используйте это, чтобы сделать действие невозможным.
Эта функция делает снимок холста, а также в каком -то другом состоянии, а затем вызывает функцию функции actionFunction . Это создает запись в истории, так что она может быть отменена.
Аргументы:
name : имя для действия, например, "Brush" или "Rotate Image 270°"icon (необязательно): Image для отображения в окне истории. Рекомендуется составлять 15x11 пикселей.actionFunction : функция, которая не принимает аргументов и изменяет холст. show_error_message(message, [error])Используйте это, чтобы отобразить диалоговое окно «Сообщение об ошибке», опционально с расширяемыми сведениями об ошибках.
Аргументы:
message : простой текст, чтобы показать в диалоговом окне.error (необязательно): объект Error , который можно отобразить в диалоговом окне, по умолчанию в разделе «Подробная информация». open_from_file(blob, source_file_handle)Используйте это, чтобы загрузить файл в приложение.
Аргументы:
blob : объект Blob , представляющий файл для загрузки.source_file_handle : соответствующий дескриптор файла для файла, как определено вашей системой.Извините за причудливый API. API новый, и его части не были спроектированы вообще. Это был всего лишь взлом, от которого я стал зависеть, достигнув внутренних интервалов JS Paint, чтобы загрузить файл. Я решил задокументировать это как первую версию API, так как я захочу изменить изменение при обновлении моего использования.
set_theme(theme_file_name)Используйте это, чтобы изменить внешний вид приложения.
Аргументы:
theme_file_name : имя файла темы для загрузки, одно из:"classic.css" : тема Windows98."dark.css" : темная тема."modern.css" : современная тема."winter.css" : праздничная зимняя тема."occult.css" : сатанинская тема. set_language(language_code)Вы можете использовать это, чтобы изменить язык приложения. Но на самом деле он покажет пользователю подсказку об изменении языка, потому что приложение необходимо перезагрузить, чтобы применить изменения. И если этот диалог не на правильном языке, ну, они, вероятно, будут запутаны.
Аргументы:
language_code : код языка для использования, например, "en" для английского языка, "zh" для традиционного китайца, "zh-simplified" для упрощенного китайца и т. Д. API сильно изменится, но изменения будут задокументированы в измене.
Не только история изменений, но и руководство по миграции/обновлению.
Для общих новостей проекта нажмите «Экспрессии»> «Новости проекта» в приложении.
JS Paint - это бесплатное программное обеспечение с открытым исходным кодом, лицензированное по разрешению лицензии MIT.
