jspaint
1.0.0
JSペイントPixel-Fect-Fect WebベースのMSペイントリメイクなど...試してみてください！次に、Discordサーバーに参加してアートを共有してください！
JS Paintは、MSペイントのすべてのツールとメニュー、さらにはあまり知られていない機能を高度に再現します。
テーマ、追加ファイルタイプ、および視線モードや音声認識などのアクセシビリティ機能をサポートしています。
ああ、はい、古き良き塗料。画面の半分近くを占める可能性のあるインターフェイスを使用したリボンや新しいskeuomorphicのものではありません。 （そして、さらに新しいペイント3dではありません。）
Windows 95、98、およびXPは、黄金の塗料でした。ツールボックスとカラーボックス、フォアグラウンドの色、背景色がありましたが、それが必要なすべてでした。
物事は簡単でした。
しかし、3つ以上のアクションを元に戻したいと考えています。透明な画像を編集します。古い塗料を使い続けることはできません。
だから私はJSペイントを作っています。古き良き絵の具を現代に持ち込みたいです。
anypalette.js。）機能の編集：
その他の改善：
ツールを備えたいくつかのことはまだ完了していません。 todo.mdを参照してください
Webアプリでの完全なクリップボードサポートには、画像w/画像のAsync Clipboard API、つまり執筆時点でChrome 76+をサポートするブラウザが必要です。
他のブラウザでは、 Ctrl+Cでコピーし、 Ctrl+Xで切断し、 Ctrl+Vで貼り付けますが、JSペイントからコピーされたデータは、JSペイントの他のインスタンスにのみ貼り付けることができます。外部画像は貼り付けることができます。
MS Paintとは異なり、編集> UNDOを使用して、色や品質の低減を節約から戻すことができます。これにより、ファイルの保存を元に戻すことはありませんが、ファイル>保存asを使用して、高品質の別の形式で保存できます。
PNGは、完全な品質を保持しながら小さなファイルサイズを提供するため、PNGとして保存することをお勧めします。
| ファイル拡張子 | 名前 | 読む | 書く | パレットを読んでください | パレットを書きます |
|---|---|---|---|---|---|
| .png | PNG | ✅ | ✅ | ||
| .bmp、.dib | モノクロビットマップ | ✅ | ✅ | ✅ | |
| .bmp、.dib | 16カラービットマップ | ✅ | ✅ | ✅ | |
| .bmp、.dib | 256カラービットマップ | ✅ | ✅ | ✅ | |
| .bmp、.dib | 24ビットビットマップ | ✅ | ✅ | n/a | n/a |
| .tif、.tiff、.dng、.cr2、.nef | tiff（最初のページを読み込む） | ✅ | ✅ | ||
| PDF（最初のページのロード） | ✅ | ||||
| .WEBP | webp | ||||
| .gif | gif | ||||
| .jpeg、.jpg | jpeg | n/a | n/a | ||
| .svg | SVG（デフォルトサイズのみ） | ||||
| .ico | ICO（デフォルトサイズのみ） |
マークされた機能は現在、サポートするかどうかのブラウザに任されています。 「書き込み」にマークされている場合、フォーマットはファイルタイプのドロップダウンに表示されますが、保存しようとすると機能しない場合があります。ファイルを開くには、詳細については、Wikipediaのブラウザ画像形式のサポートテーブルを参照してください。
マークされた機能はまもなく登場する可能性があり、n/aは適用されないことを意味します。
「読み取りパレット」とは、色を色のボックスに自動的にロードすることを指します（インデックス付きの色の画像から）、「書き込みパレット」とは、インデックス付きのカラー画像の書き込みを指します。
色で> with colors and colors> get colors> get colorsは、幅広いプログラムと互換性があるため、さまざまな形式で色を保存およびロードできます。
別のアプリケーションに広範なパレットサポートを追加したい場合は、この機能をライブラリとして利用できるようにしました。 anypalette.js
| ファイル拡張子 | 名前 | プログラム | 読む | 書く |
|---|---|---|---|---|
| .Pal | リフパレット | Windows 95およびWindows NT 4.0用のMSペイント | ✅ | ✅ |
| .gpl | GIMPパレット | Gimp、Inkscape、Krita、Kolourpaint、Scribus、Cinepaint、MyPaint | ✅ | ✅ |
| .aco | アドビカラースウォッチ | Adobe Photoshop | ✅ | ✅ |
| .ase | Adobe Swatch Exchange | Adobe Photoshop、Indesign、およびIllustrator | ✅ | ✅ |
| 。TXT | paint.netパレット | paint.net | ✅ | ✅ |
| 。活動 | アドビカラーテーブル | Adobe PhotoshopとIllustrator | ✅ | ✅ |
| .pal、.psppalette | ペイントショッププロパレット | ペイントショッププロ（JASCソフトウェア / Corel） | ✅ | ✅ |
| .hpl | ホームサイトパレット | Allaire Homesite / Macromedia ColdFusion | ✅ | ✅ |
| .cs | Colorschemer | Colorschemer Studio | ✅ | |
| .Pal | スタークラフトパレット | スタークラフト | ✅ | ✅ |
| .wpe | Starcraft Terrainパレット | スタークラフト | ✅ | ✅ |
| .sketchpalette | スケッチパレット | スケッチ | ✅ | ✅ |
| .spl | スケンシルパレット | スケンシル（以前はスケッチと呼ばれる） | ✅ | ✅ |
| .soc | スターオフィスの色 | Staroffice、Openoffice、Libreoffice | ✅ | ✅ |
| 。色 | Kolourpaint Color Collection | kolourpaint | ✅ | ✅ |
| 。色 | プラズマデスクトップ配色 | KDEプラズマデスクトップ | ✅ | |
| 。テーマ | Windowsテーマ | Windowsデスクトップ | ✅ | |
| .themepack | Windowsテーマ | Windowsデスクトップ | ✅ | |
| .css、.scss、.styl | カスケードスタイルシート | Webブラウザ / Webページ | ✅ | ✅ |
| .html、.svg、.js | CSS色のテキストファイル | Webブラウザ / Webページ | ✅ |
パレットの色の代わりにパターンを備えた黒と白のモードがあり、それを画像>属性から把握できます...
適切な場所でつかむと、カラーボックスとツールボックスをドラッグできます。それらを小さな窓にドラッグすることもできます。タイトルバーをダブルクリックすることで、窓を横に戻すことができます。
左クリックの前景色と右クリックの背景色に加えて、描画中にCTRLを保持してアクセスできる3番目の色があります。色なしで始まるので、最初にCTRLを保持して色を選択する必要があります。このカラースロットの派手なことは、描画中にCTRLを押して色を切り替えることができることです。
フリップ/回転、ストレッチ/スキュー、または反転（画像メニュー）などの画像変換を、画像全体または選択に適用できます。フリーフォーム選択ツールで落書きをしてから、画像を実行してください> nevert
MSペイントのチュートリアルからのこれらのヒントとトリックは、JSペイントでも機能します。
JSペイントは、プログレッシブWebアプリ（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を実行して、サイプレスでブラウザベースのテストを実行します。 （残念ながら、テストを起動して実行するのは遅いです。）
npm run accept 。残念ながら、これは前のテストの結果を受け入れるのではなく、すべてのテストを再実行するため、以前のテストとは異なる結果が得られる可能性があります。 Githubデスクトップを使用する場合、4つの異なるモードで画像の違いを表示できます。
サイプレスUIを開くには、最初の実行npm run test:start-server 、次に同時にnpm run cy:open
テストは、Travis CIとの継続的な統合でも実行されます。
npm iに依存関係をインストールした後、 npm run devを使用してライブレロードサーバーを起動します。
レイアウトの重要なスタイルがlayout.cssで搭載されていることを確認してください。 layout.css更新するとき、rtlcssを使用して、左から左のバージョンのスタイルシートが生成されます。
言語をアラビア語またはヘブライ語に変更して、RTLレイアウトをテストする必要があります。エクストラ>言語>炒め>العربيةまたはעברעברに移動します。
RTLレイアウトを制御する方法については、制御指令を参照してください。
デバッグのためにChromeに接続するためのVSコード起動タスクがあります。使用手順については.vscode/launch.json参照してください。
npm iに依存関係をインストールしますnpm run electron:start電子層が含まれているため、 F5 / Ctrl+Rを使用してリロードし、 F12 / Ctrl+Shift+Iを使用してDevToolsを開くことができます。
npm run electron:makeで生産用に構築できます
電子メインプロセスをデバッグするためのVSコード起動タスクがあります。レンダラープロセスには、埋め込まれたChrome Devtoolsを使用できます。
JSペイントは、通常のWebサーバーを使用して展開できます。
コンパイルする必要はありません。
オプションで、JSペイントにURLを貼り付ける場合、Webから画像をロードするためにCORS Anywhereサーバーをセットアップするか、同じドメインにない画像を使用して#load:<URL>機能を使用できます。
デフォルトでは、jspaint.appで動作するように設定されたCORS Anywhereインスタンスを使用します。
Herokuで無料でホストされており、独自のインスタンスを設定して、独自のドメインで動作するように構成できます。
https://jspaint-cors-proxy.herokuapp.com独自のインスタンスURLに置き換える必要があります。
マルチプレイヤーサポートは現在、オープンソースソフトウェアではないFireBaseに依存しています。
FireBase RealTime Databaseインスタンスを作成し、JS Paintのsessions.jsを編集して、Webアプリを設定したときにFirebaseコンソールの構成でinitializeAppに渡されたconfigを置き換えることができます。
しかし、マルチプレイヤーモードはこれまでのところ非常に粗雑です。オープンソース、より安全で、より効率的で、より堅牢なものに置き換える必要があります。
これをHTMLに追加します：
< iframe src =" https://jspaint.app " width =" 100% " height =" 100% " > </ iframe > #load:<URL>をURLに追加して、URLから画像をロードできます。
< iframe src =" https://jspaint.app#load:https://jspaint.app/favicon.ico " width =" 100% " height =" 100% " > </ iframe >JSペイントを制御したい場合、ファイルの保存/ロード、またはキャンバスに直接アクセスする方法は、不安定なAPIがあります。
まず、リポジトリをクローンする必要があります。これにより、 iframeローカルコピーに向けることができます。
JS Paintのローカルコピーは、含まれるページと同じWebサーバーでホストする必要があります。より具体的には、同じ起源を共有する必要があります。
ローカルコピーを持つことは、APIが変更されるときも物事が壊れないことを意味します。
JSペイントがjspaintと呼ばれるフォルダーにクローン化されている場合、埋め込みページと同じフォルダーに存在する場合は、これを使用できます。
< iframe src =" jspaint/index.html " id =" jspaint-iframe " width =" 100% " height =" 100% " > </ iframe >それが他のどこかに住んでいる場合は、パスの開始に加えて、レベルを上げる必要があるかもしれ../ん。たとえば、 src="../../apps/jspaint/index.html" 。 src="https://example.com/cool-apps/jspaint/index.html"のような絶対URLを使用することもできます。
JS PaintのsystemHooks APIを使用して、ファイルの保存と開くダイアログをオーバーライドできます。
< 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は、メモリ内のファイルの内容を表します。
ファイルハンドルは、ファイルを識別できるものです。この概念を所有し、ファイルを識別する方法を定義します。インデックスから配列、ドロップボックスファイルID、IPFS URL、ファイルパスまで、あらゆるものがあります。それはあらゆるタイプであるか、多分それは文字列である必要があるかもしれません、私は忘れています。
ファイルハンドルの概念を取得したら、システムフックを使用してファイルピッカーを実装し、ファイルを読み書きする機能を実行できます。
| 指示 | 使用されるフック |
|---|---|
| ファイル>保存as | 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と同じ> save |
| extras> gifとして履歴をレンダリングします | file> save asと同じ |
| 色>色を保存します | file> save asと同じ |
| 色>色を取得します | ファイル> openと同じ |
編集用にファイルをロードしたファイルを使用してアプリを起動するには、アプリがロードされるのを待ってから、ファイルハンドルでsystemHooks.readBlobFromHandle呼び出し、アプリにそのファイルBLOBをロードするように指示します。
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 >しかし、これは保存するためにファイルハンドルをセットアップしません。
2つの関数を定義して壁紙を設定できます。これは、壁紙（タイル張り）として設定され、壁紙（中央）として設定されたファイル>セットで使用されます。
systemHooks.setWallpaperTiled = (canvas) => { ... };systemHooks.setWallpaperCentered = (canvas) => { ... }; systemHooks.setWallpaperCenteredのみを定義すると、JSペイントは画面の寸法を推測し、画像をタイルしようとし、 systemHooks.setWallpaperCentered関数を呼び出して適用します。
systemHooks.setWallpaperCenteredを指定しない場合、JS Paintは、 systemHooks.showSaveFileDialogおよびsystemHooks.writeBlobToHandleを使用してファイル（ <original file name> wallpaper.png ）をデフォルトで保存します。
これは、コンテンディングページの背景として永続的なカスタム壁紙をサポートする完全な例です。
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でDOM検査官に膨らんでいないようにBlob URLを使用したかったと思います。これは本当にDevTools UXバグです。多分彼らはこれを改善しましたか？）
目的の寸法を持つファイルをロードできます。現時点では、これに特別なAPIはありません。
最初にファイルの読み込みを参照してください。
プログラムでテーマを変更できます。
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;しかし、これはユーザーの好みを破壊します。
エクストラ>テーマメニューは引き続き機能しますが、ページをリロードするときは好みが続きません。
将来的には、デフォルトのテーマを指定するクエリ文字列パラメーターがあるかもしれません。また、JSPAINTをフォークしてデフォルトのテーマを変更することもできます。
テーマと同様に、プログラムで言語を変更してみることができます。
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_language ( "ar" ) ;しかし、これにより、実際にユーザーにアプリケーションをリロードして言語を変更するように依頼します。
エクストラ>言語メニューは引き続き機能しますが、ユーザーはページをリロードするたびに言語を変更することに悩まされます。
将来的には、デフォルト言語を指定するクエリ文字列パラメーターがあるかもしれません。 JSPAINTをフォークしてデフォルト言語を変更することもできます。
まだサポートされていません。 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" ) ;ドキュメントのロードにこれを使用しないことをお勧めします。ドキュメントのタイトルを変更したり、元に戻す/やり直し履歴をリセットしたりすることもできます。代わりに、 open_from_file使用します。
ドキュメントに何かをするためにボタンまたは他のUIを作成したい場合は、（おそらく）元に戻す必要があります。それは非常に簡単です、あなたの行動を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が必要であり、保存するファイルの内容を表すBlobで解決するPromiseを返します。function savedCallbackUnreliable({ newFileName, newFileFormatID, newFileHandle, newBlob }) （オプション）：ユーザーがファイルを保存したときに呼び出す関数。 newBlob getBlob(newFileFormatID)から来るはずです。dialogTitle （オプション）：[保存]ダイアログのタイトル。ここでコントロールの反転に注意してください：JSペイントはsystemHooks.showSaveFileDialog関数を呼び出し、JS PaintのgetBlob関数を呼び出します。 getBlob解決したら、JS Paintで定義されているsavedCallbackUnreliable機能を呼び出すことができます。 （うまくいけば、将来これを明確にすることができます。）
また、この関数は、保存場所を選択するだけでなく、ファイルを保存する責任があることにも注意してください。 systemHooks.writeBlobToHandle機能が役立つ場合は、再利用できます。
systemHooks.showOpenFileDialog({ formats })この関数を定義して、デフォルトの開くダイアログをオーバーライドします。これは、画像とパレットを開くために使用されます。
議論：
formats ： systemHooks.showSaveFileDialogと同じこの関数は、ファイルを選択するだけでなく、ファイルの内容をロードする責任があることに注意してください。 systemHooks.readBlobFromHandle機能が役立つ場合は再利用できます。
systemHooks.writeBlobToHandle(fileHandle, blob)この関数を定義して、JSペイントにファイルの保存方法を教えてください。
議論：
fileHandle ：システムで定義されているファイルハンドルは、書き込みファイルを表します。blob ：保存するファイルの内容を表すBlob 。返品：
trueに保存された場合、エラーが発生した場合、またはユーザーがキャンセルされた場合、ファイルが正常に保存されたかどうかがわからない場合はfalseファイルPromise正常に保存された場合にtrueでundefined約束<a href="..." download="..."> 。約束は拒否すべきではありません。エラーメッセージを表示し、 falseを返すことにより、エラーを処理する必要があります。 systemHooks.readBlobFromHandle(fileHandle)この関数を定義して、JSペイントにファイルのロード方法を教えてください。
議論：
fileHandle ：システムで定義されているファイルハンドルは、読み取りファイルを表します。 systemHooks.setWallpaperTiled(canvas)この関数を定義して、JSペイントに壁紙の設定方法を教えてください。例については、壁紙として統合セットを参照してください。
議論：
canvas ：壁紙として設定する画像を備えたHTMLCanvasElement 。 systemHooks.setWallpaperCentered(canvas)この関数を定義して、JSペイントに壁紙の設定方法を教えてください。例については、壁紙として統合セットを参照してください。
議論：
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ペイントの内部に到達してファイルをロードしました。とにかく、使用法をアップグレードする際にChangelogが必要なので、APIの最初のバージョンとして文書化することにしました。
set_theme(theme_file_name)これを使用して、アプリケーションの外観を変更します。
議論：
theme_file_name ：ロードするテーマファイルの名前、1つ："classic.css" ：Windows98テーマ。"dark.css" ：暗いテーマ。"modern.css" ：現代のテーマ。"winter.css" ：お祝いの冬のテーマ。"occult.css" ：悪魔のテーマ。 set_language(language_code)これを使用してアプリケーションの言語を変更できます。しかし、実際には、アプリケーションが変更を適用するためにリロードする必要があるため、言語を変更するプロンプトが表示されます。そして、そのダイアログが正しい言語でない場合、彼らはおそらく混乱するでしょう。
議論：
language_code ：使用する言語コード、たとえば英語の"en" 、 "zh" "zh-simplified" for simplied bershingなど。 APIは大きく変更されますが、変更はChangelogで文書化されます。
変更の歴史だけでなく、移行/アップグレードガイド。
一般的なプロジェクトのニュースについては、アプリの[追加]> [プロジェクトニュース]をクリックします。
JSペイントは無料でオープンソースソフトウェアで、許容されるMITライセンスの下でライセンスされています。
