يُعد إنشاء تطبيقات لوحة الرسومات أمرًا جديدًا ، حتى يمكننا إنشاء ألعاب معه ، وهو مدعوم في جميع المتصفحات الرئيسية سواء على سطح المكتب أو الجوّال ، مما يجعله حلاً أكثر قابلية للتطبيق من استخدام Flash.
في هذا البرنامج التعليمي ، سنستخدم عنصر لوحة الرسم لإنشاء منتقي ألوان بسيط لا يتطلب أي Flash ، وكل ما تحتاج إليه هو محرر نصوص ومُتصفح.
قبل أن نبدأ ، نلقي نظرة على ما سنبنيه هنا. يمكنك أيضًا تنزيل الملفات المصدر هنا. لاحظ أنه إذا كنت ستختبر العرض التوضيحي محليًا ، فستحتاج إلى استخدام متصفح آخر غير Chrome ؛ نموذج أمان Chrome يعني أن النص البرمجي سيعمل فقط عبر الإنترنت.
بالنسبة إلى هذا المثال ، سيكون HTML ضئيلاً للغاية ، وكل ما نحتاجه لكي يعمل منتقي الألوان هو عنصر من عناصر اللوحة وبعض الأماكن لعرض ألواننا المحددة في تنسيقات RGB و HEX ، لذلك كل ما نحتاج إليه هو:
HEX: RGB: ونظرًا لأننا سنستخدم صورة خلفية مع لوحة الألوان ، فإنني قد جعلت لوحتي من العرض والارتفاع لتلك الصورة ، وستظهر قيم لون selecetd في المدخلات لتسهيل التحديد.
يجب عليك أيضًا إضافة jQuery إلى صفحتك نظرًا لأننا سنستخدم بعض رموز jQuery.
أول شيء يتعين علينا القيام به من أجل جعل منتقي الألوان هو الحصول على اللوحة وسياقها والقيام بذلك كل ما نحتاج إليه هو سطر من التعليمات البرمجية ، مثل:
var canvas = document.getElementById('canvas_picker').getContext('2d');الآن بعد أن حصلنا على عنصر لوحة الرسم وسياقها ، يمكننا البدء بتعيين الصورة كخلفية للقماش. للقيام بذلك ، نحتاج إلى إنشاء كائن صورة وجعل مصدره عنوان URL الخاص بالصورة. عندما يتم تحميل هذه الصورة ، نحتاج إلى رسمها في اللوحة:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});حتى الآن جيد جدا ، أليس كذلك؟
حسنًا ، هذا هو الجزء الذي نحتاج فيه إلى تحديد ما يحدث عند النقر في أي مكان في اللوحة ، وإذا كنت تفكر في ذلك ، فأنت بحاجة أولاً إلى الحصول على موضع مؤشر المستخدم في اللوحة لمعرفة مكان النقر ، مثل:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;باستخدام هذين السطرين من التعليمات البرمجية ، يمكننا أن نرى المكان الذي نقر عليه المستخدم ، وما نفعله هو الحصول على إحالات حيث نقر المستخدم ثم نطرح من ذلك إزاحة اللوحة. سيخبرنا ذلك المكان الذي نقر عليه المستخدم بالنسبة إلى موضع اللوحة.
خطوتنا التالية هي الحصول على قيم RGB للمكان الذي نقر عليه المستخدم والقيام بذلك نحن بحاجة إلى استخدام الدالة getImageData وإرفاق موضع x و y بالنقرة:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];لدينا الآن هذه القيم مخزنة داخل متغيرات R و G و B ولكننا نريد عرض هذه المعلومات للمستخدم بطريقة يمكن بسهولة قراءتها ، لذا نحتاج إلى إنشاء متغير RGB يحمل هذه القيم الثلاث المفصولة بفواصل وبعد ذلك قدم هذا كقيمة لأحد حقول الإدخال:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});وإذا قمت باختباره الآن ، فلديك بالفعل منتقي ألوان يعمل بكامل طاقته يسترد قيمة RGB في أي مكان تنقر عليه ، ولكن لجعل هذا أفضل قليلاً ، يمكننا إضافة وظيفة من Javascripter يقوم بتحويل قيم RGB إلى قيم HEX ؛ الوظيفة هي:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}الآن بعد أن حصلنا على هذه الوظيفة ، كل ما نحتاجه من أجل تقديم قيم HEX هو أداء الوظيفة باستخدام قيم RBG الخاصة بنا ، ثم تعيين قيمة الإدخال ليكون لون HEX مع # قبل ومن خلال الوظيفة الموجودة بالفعل في هذا المكان بسيط للغاية:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: آمل أن تكون قد أدركت مع هذا البرنامج التعليمي إمكانات إنشاء تطبيقات باستخدام القماش. هناك الكثير من التطبيقات المتقدمة هناك ، حتى أن الأشخاص يصنعون ألعابًا باستخدام قماش ، لذلك من الأفضل استكشافها لأنك تستطيع بناء بعض الأشياء المدهشة معها.
ما هي الاستخدامات الأخرى التي وجدتها لـ Canvas؟ ما الذي تود أن تكون قادرًا على استخدامه؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة منقار اللون عبر Shutterstock.