jspaint
1.0.0
طلاء JSطبعة طلاء MS Pixel-Pixel-Pixel على الويب والمزيد ... جربها! ثم انضم إلى خادم Discord لمشاركة فنك!
تقوم JS Paint بإعادة إنشاء كل أداة وقائمة من MS Paint ، وحتى الميزات غير المعروفة ، بدرجة عالية من الإخلاص.
وهو يدعم السمات وأنواع الملفات الإضافية وميزات إمكانية الوصول مثل وضع نظرة العين والتعرف على الكلام.
آه نعم ، طلاء قديم جيد. ليس الشخص الذي يحتوي على أشرطة أو واحد skeuomorphic الجديد مع الواجهة التي يمكن أن تأخذ ما يقرب من نصف الشاشة. (وليس أحدث طلاء ثلاثي الأبعاد.)
كانت Windows 95 و 98 و XP هي السنوات الذهبية للطلاء. كان لديك صندوق أدوات وصندوق ملون ولون مقدمة ولون خلفية ، وكان هذا كل ما تحتاجه.
كانت الأمور بسيطة.
لكننا نريد التراجع عن أكثر من ثلاثة إجراءات. نريد تحرير صور شفافة. لا يمكننا الاستمرار في استخدام الطلاء القديم.
لهذا السبب أقوم بعمل طلاء JS. أريد أن أحضر الطلاء القديم الجيد في العصر الحديث.
anypalette.js.)ميزات التحرير:
تحسينات متنوعة:
بعض الأشياء مع الأدوات لم يتم بعد. انظر TODO.MD
يتطلب دعم الحافظة الكاملة في تطبيق الويب متصفحًا يدعم API Async Clipboard W/ الصور ، أي Chrome 76+ في وقت كتابة هذا التقرير.
في المتصفحات الأخرى ، لا يزال بإمكانك النسخ باستخدام CTRL+C ، وقطع مع CTRL+X ، والصق مع CTRL+V ، ولكن لا يمكن لصق البيانات من طلاء JS إلا في مثيلات أخرى من طلاء JS. يمكن لصق الصور الخارجية.
على عكس MS Paint ، يمكنك استخدام Edit> التراجع عن العودة إلى الحد من الألوان أو الحد من الجودة من الادخار. هذا لا يتراجع عن حفظ الملف ، ولكنه يسمح لك بالحفظ بتنسيق مختلف بجودة أعلى ، باستخدام ملف> حفظ AS .
يوصى بالحفظ كـ PNG لأنه يعطي أحجام ملفات صغيرة مع الحفاظ على الجودة الكاملة.
| تمديد الملف | اسم | يقرأ | يكتب | قراءة لوحة | كتابة لوحة |
|---|---|---|---|---|---|
| .png | PNG | ✅ | ✅ | ||
| .bmp ، .dib | نقطية أحادية اللون | ✅ | ✅ | ✅ | |
| .bmp ، .dib | 16 لون نقطات | ✅ | ✅ | ✅ | |
| .bmp ، .dib | 256 Color Bitmap | ✅ | ✅ | ✅ | |
| .bmp ، .dib | 24 بت صورة نقطية | ✅ | ✅ | ن/أ | ن/أ |
| .tif ، .tiff ، .dng ، .cr2 ، .nef | TIFF (تحميل الصفحة الأولى) | ✅ | ✅ | ||
| PDF (تحميل الصفحة الأولى) | ✅ | ||||
| .webp | ويب | ||||
| .gif | GIF | ||||
| .jpeg ، .jpg | JPEG | ن/أ | ن/أ | ||
| .SVG | SVG (الحجم الافتراضي فقط) | ||||
| .كو | ICO (الحجم الافتراضي فقط) |
تترك القدرات التي تحمل علامة حاليًا للمتصفح لدعمها أم لا. إذا تم تمييز "الكتابة" ، فسيظهر التنسيق في منسدلة نوع الملف ولكن قد لا يعمل عند محاولة حفظه. لفتح الملفات ، راجع جدول دعم تنسيق صورة متصفح Wikipedia لمزيد من المعلومات.
قد تكون القدرات التي تم وضع علامة عليها قريبًا ، و N/A غير قابلة للتطبيق.
يشير "قراءة لوحة" إلى تحميل الألوان في مربع الألوان تلقائيًا (من صورة ملونة مفهرسة) ، ويشير "لوحة الكتابة" إلى كتابة صورة ملونة مفهرسة.
مع الألوان> حفظ الألوان والألوان > احصل على ألوان يمكنك حفظها وتحميلها في العديد من التنسيقات المختلفة ، للتوافق مع مجموعة واسعة من البرامج.
إذا كنت ترغب في إضافة دعم واسع للوحة إلى تطبيق آخر ، فقد جعلت هذه الوظيفة متاحة كمكتبة: anypalette.js
| تمديد الملف | اسم | البرامج | يقرأ | يكتب |
|---|---|---|---|---|
| .pal | لوحة ريف | MS Paint لنظام التشغيل Windows 95 و Windows NT 4.0 | ✅ | ✅ |
| .gpl | لوحة الأسلوب | gimp ، inkscape ، krita ، kolourpaint ، scribus ، cinepaint ، mypaint | ✅ | ✅ |
| .aco | Adobe Color Swatch | Adobe Photoshop | ✅ | ✅ |
| .ase | Adobe Swatch Exchange | Adobe Photoshop ، Indesign ، والرسام | ✅ | ✅ |
| .رسالة قصيرة | Paint.net لوحة | paint.net | ✅ | ✅ |
| .يمثل | طاولة ألوان Adobe | Adobe Photoshop و Illustrator | ✅ | ✅ |
| .pal ، .psppalette | لوحة Paint Shop Pro | Paint Shop Pro (JASC Software / Corel) | ✅ | ✅ |
| .hpl | لوحة HomeSite | Allaire Homesite / Macromedia Coldfusion | ✅ | ✅ |
| .CS | ColorSchemer | ColorSchemer Studio | ✅ | |
| .pal | لوحة Starcraft | Starcraft | ✅ | ✅ |
| .wpe | لوحة التضاريس Starcraft | Starcraft | ✅ | ✅ |
| .sketchpalette | لوحة رسم | رسم | ✅ | ✅ |
| .spl | لوحة الاصابة | Skencil (يسمى سابقًا Sketch) | ✅ | ✅ |
| .soc | ألوان staroffice | Staroffice ، OpenOffice ، libreoffice | ✅ | ✅ |
| .الألوان | مجموعة ألوان Kolourpaint | Kolourpaint | ✅ | ✅ |
| .الألوان | نظام ألوان سطح المكتب البلازما | KDE البلازما سطح المكتب | ✅ | |
| .سمة | موضوع Windows | سطح المكتب Windows | ✅ | |
| .themepack | موضوع Windows | سطح المكتب Windows | ✅ | |
| .css ، .scss ، .styl | ملاءمة متتالية | متصفحات الويب / صفحات الويب | ✅ | ✅ |
| .html ، .svg ، .js | أي ملفات نصية بألوان CSS | متصفحات الويب / صفحات الويب | ✅ |
يوجد وضع أبيض وأسود مع أنماط بدلاً من الألوان في اللوحة ، والتي يمكنك الوصول إليها من سمات الصورة> ...
يمكنك سحب مربع اللون وصندوق الأدوات حوله إذا أمسك بها في المكان الصحيح. يمكنك حتى سحبها إلى النوافذ الصغيرة. يمكنك إرساء النوافذ مرة أخرى إلى الجانب بالنقر المزدوج على أشرطة الملكية الخاصة بهم.
بالإضافة إلى لون المقدمة النقر اليسرى ولون الخلفية النقر بزر الماوس الأيمن ، هناك لون ثالث يمكنك الوصول إليه عن طريق الضغط على CTRL أثناء الرسم. يبدأ بدون لون ، لذا ستحتاج إلى الاحتفاظ بـ CTRL وتحديد لون أولاً. الشيء الهائل في هذه الفتحة الملونة هو أنه يمكنك الضغط على Ctrl وإطلاقه لتبديل الألوان أثناء الرسم .
يمكنك تطبيق تحويلات الصور مثل flip/round أو تمتد/منحرفة أو عكس (في قائمة الصور) إما على الصورة بأكملها أو إلى التحديد. جرب الخربشة باستخدام أداة تحديد الشكل المجاني ثم القيام بالصورة> anvert
تعمل هذه النصائح والحيل من برنامج تعليمي لطلاء MS أيضًا في JS 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 لإصلاح جميع المشكلات القابلة للتكوين التلقائي.
يتم تكوين قواعد التنسيق للتوافق مع Formatter VS Code المدمج.
قم بتشغيل npm test لتشغيل الاختبارات المستندة إلى المتصفح باستخدام Cypress. (إنه بطيء في بدء الاختبارات وتشغيلها ، لسوء الحظ.)
تشغيل npm run accept لقبول أي تغييرات بصرية. هذا للأسف يعيد تشغيل جميع الاختبارات ، بدلاً من قبول نتائج الاختبار السابق ، لذلك قد ينتهي بك الأمر بنتائج مختلفة عن الاختبار السابق. إذا كنت تستخدم سطح المكتب Github ، فيمكنك عرض صور مختلفة من الصور ، في أربع أوضاع مختلفة.
لفتح واجهة المستخدم Cypress ، قم بتشغيل npm run test:start-server ، ثم متزامن npm run cy:open
يتم إجراء الاختبارات أيضًا في التكامل المستمر مع Travis CI.
بعد تثبيت التبعيات مع npm i ، استخدم npm run dev لبدء خادم التحميل المباشر.
تأكد من أن أي أنماط مهمة تخطيط تسير في layout.css . عند تحديث layout.css .
يجب عليك اختبار تخطيط RTL عن طريق تغيير اللغة إلى اللغة العربية أو العبرية. انتقل إلى الإضافات> اللغة> العرف أو
انظر توجيهات التحكم عن كيفية التحكم في تخطيط RTL.
هناك مهمة إطلاق VS Code للإرفاق إلى Chrome لتصحيح الأخطاء. انظر .vscode/launch.json للحصول على تعليمات الاستخدام.
npm inpm run electron:startيتم تضمين الإلكترون-Debug ، بحيث يمكنك استخدام F5 / CTRL+R لإعادة التحميل و F12 / CTRL+Shift+I لفتح DevTools.
يمكنك البناء للإنتاج باستخدام npm run electron:make
هناك مهمة إطلاق Code VS لتصحيح العملية الرئيسية للإلكترون. بالنسبة لعملية العارض ، يمكنك استخدام DevTools المدمجة.
يمكن نشر طلاء JS باستخدام خادم ويب عادي.
لا شيء يحتاج إلى تجميع.
اختياريا ، يمكنك إعداد خادم CORS في أي مكان ، لتحميل الصور من الويب ، إذا قمت بلصق عنوان URL في طلاء JS ، أو استخدام ميزة #load:<URL> مع الصور غير الموجودة على نفس المجال.
بشكل افتراضي ، ستستخدم مثيل CORS في أي مكان تم إعداده للعمل مع jspaint.app.
يتم استضافته مجانًا على Heroku ، ويمكنك إعداد مثيلك الخاص وتكوينه للعمل مع مجالك الخاص.
سيتعين عليك العثور على https://jspaint-cors-proxy.herokuapp.com بعنوان URL الخاص بك.
يعتمد دعم اللاعبين المتعددين حاليًا على Firebase ، وهو ليس برامج مفتوحة المصدر.
يمكنك إنشاء مثيل لقاعدة بيانات FireBase Realtime وتحرير sessions.js JS Paint للإشارة إليه ، واستبدال 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 ، أو كيفية حفظ/تحميل الملفات ، أو الوصول إلى القماش مباشرة ، فهناك واجهة برمجة تطبيقات غير مستقرة.
أولاً ، تحتاج إلى استنساخ الريبو ، حتى تتمكن من توجيه iframe إلى نسختك المحلية.
يجب استضافة النسخة المحلية من JS Paint على نفس خادم الويب مثل الصفحة المحتوية ، أو بشكل أكثر تحديداً ، يجب أن تشارك نفس الأصل.
إن وجود نسخة محلية يعني أيضًا أن الأمور لن تنكسر في أي وقت يتغير فيه واجهة برمجة التطبيقات.
إذا تم استنساخ طلاء 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 systemHooks JS Paint.
< 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 |
| ملف> تعيين خلفية (TILE) | systemHooks.setWallpaperTiled إذا تم تعريفه ، else systemHooks.setWallpaperCentered إذا تم تعريفه ، وإلا مثل الملف> حفظ AS |
| ملف> تعيين خلفية (تركز) | systemHooks.setWallpaperCentered إذا تم تعريفه ، آخر نفس الملف> حفظ AS |
| إضافات> عرض التاريخ مثل GIF | نفس الملف> حفظ AS |
| الألوان> حفظ الألوان | نفس الملف> حفظ AS |
| الألوان> احصل على الألوان | نفس الملف> فتح |
لبدء التطبيق بملف تم تحميله للتحرير ، انتظر حتى يتم تحميل التطبيق ، ثم اتصل على 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 >ولكن هذا لن يقوم بإعداد مقبض الملف للحفظ.
يمكنك تحديد وظيفتين لتعيين خلفية ، والتي سيتم استخدامها بواسطة ملف> تم تعيينها كخلفية (TILE) وملف > تم تعيينها كخلفية (مركز) .
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. ربما قاموا بتحسين هذا؟)
يمكنك تحميل ملف له الأبعاد المطلوبة. لا يوجد واجهة برمجة تطبيقات خاصة لهذا في الوقت الحالي.
انظر تحميل ملف في البداية.
يمكنك تغيير السمة برمجيا:
var iframe = document . getElementById ( "jspaint-iframe" ) ;
var jspaint = iframe . contentWindow ;
jspaint . set_theme ( "modern.css" ) ;ولكن هذا سوف يكسر تفضيل المستخدم.
ستظل قائمة TERSARS> TURMES تعمل ، لكن التفضيل لن يستمر عند إعادة تحميل الصفحة.
في المستقبل قد يكون هناك معلمة سلسلة استعلام لتحديد السمة الافتراضية. يمكنك أيضًا شوكة 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 .
إذا كنت ترغب في إنشاء أزرار أو واجهة مستخدم أخرى للقيام بأشياء للوثيقة ، فيجب عليك (ربما) أن تجعلها غير قابلة للتراجع. من السهل جدًا ، فقط لف أعمالك في مكالمة إلى 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 : مجموعة من ملحقات الملفات ، باستثناء DOT ، مع التمديد المفضل أولاً ، على سبيل المثال ["bmp", "dib"]defaultFileName (اختياري): اسم ملف مقترح ، على سبيل المثال "Untitled.png" أو اسم مستند مفتوح.defaultPath (اختياري): مقبض ملف لمستند تم فتحه ، حتى تتمكن من الحفظ في نفس المجلد بسهولة. Misnomer: قد لا يكون هذا مسارًا ، فهذا يعتمد على كيفية تحديد مقابض الملف.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. (آمل أن أتمكن من توضيح هذا في المستقبل.)
لاحظ أيضًا أن هذه الوظيفة مسؤولة عن حفظ الملف ، وليس فقط اختيار موقع حفظ. يمكنك إعادة استخدام وظيفة systemHooks.writeBlobToHandle إذا كانت مفيدة.
systemHooks.showOpenFileDialog({ formats })حدد هذه الوظيفة لتجاوز مربع الحوار المفتوح الافتراضي. يستخدم هذا لفتح الصور واللوحات.
الحجج:
formats : مثل systemHooks.showSaveFileDialog لاحظ أن هذه الوظيفة مسؤولة عن تحميل محتويات الملف ، وليس فقط اختيار ملف. يمكنك إعادة استخدام وظيفة systemHooks.readBlobFromHandle إذا كانت مفيدة.
systemHooks.writeBlobToHandle(fileHandle, blob)حدد هذه الوظيفة لإخبار JS Paint كيفية حفظ ملف.
الحجج:
fileHandle : مقبض ملف ، كما هو محدد بواسطة نظامك ، يمثل الملف للكتابة إليه.blob : A Blob تمثل محتويات الملف للحفظ.عائدات:
Promise بأن يحل مع true إذا تم حفظ الملف بالتأكيد بنجاح ، أو false في حالة حدوث خطأ أو إلغاء المستخدم ، أو undefined إذا لم يكن معروفًا ما إذا كان الملف قد تم حفظه بنجاح ، كما هو الحال مع ملف تنزيل الملف باستخدام <a href="..." download="..."> . الوعد لا ينبغي أن يرفض. يجب التعامل مع الأخطاء من خلال إظهار رسالة خطأ وإرجاع false . systemHooks.readBlobFromHandle(fileHandle)حدد هذه الوظيفة لإخبار JS Paint كيفية تحميل ملف.
الحجج:
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 : مقبض ملف مقابل للملف ، كما هو محدد بواسطة نظامك.آسف على واجهة برمجة التطبيقات الغريبة. واجهة برمجة التطبيقات جديدة ، ولم يتم تصميم أجزاء منه على الإطلاق. كان هذا مجرد اختراق أتيت إليه ، حيث وصلت إلى الداخلية من طلاء JS لتحميل ملف. قررت توثيقه كإصدار أول من واجهة برمجة التطبيقات ، حيث أنني سأريد تغييرًا عند ترقية استخدامي له على أي حال.
set_theme(theme_file_name)استخدم هذا لتغيير مظهر التطبيق.
الحجج:
theme_file_name : اسم ملف السمة لتحميله ، واحد من:"classic.css" : موضوع Windows98."dark.css" : The Dark theme."modern.css" : الموضوع الحديث."winter.css" : موضوع الشتاء الاحتفالي."occult.css" : موضوع شيطاني. set_language(language_code)يمكنك استخدام هذا نوعًا لتغيير لغة التطبيق. ولكن في الواقع ، سيظهر موجهًا للمستخدم لتغيير اللغة ، لأن التطبيق يحتاج إلى إعادة تحميل لتطبيق التغيير. وإذا لم يكن الحوار هذا باللغة الصحيحة ، فمن المحتمل أن يتم الخلط بينهم.
الحجج:
language_code : رمز اللغة المراد استخدامه ، على سبيل المثال "en" للغة الإنجليزية ، "zh" للصينيين التقليديين ، "zh-simplified" للصينيين المبسطين ، إلخ. ستتغير API كثيرًا ، ولكن سيتم توثيق التغييرات في Changelog.
ليس مجرد تاريخ من التغييرات ، ولكن دليل الترحيل/الترقية.
للحصول على أخبار المشروع العام ، انقر فوق إضافات> أخبار المشروع في التطبيق.
Paint JS هو برنامج مجاني ومفتوح المصدر ، مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
