منذ أن بدأت العمل، كتبت عن vue، وreact، والقواعد العادية، والخوارزميات، والبرامج الصغيرة، وما إلى ذلك، لكنني لم أكتب أبدًا عن القماش، لأنني حقًا لا أعرف كيف!
في عام 2018، حددت هدفًا صغيرًا لنفسي: تعلم الرسم على القماش، وتحقيق النتيجة المتمثلة في القدرة على استخدام القماش لتحقيق بعض الرسوم المتحركة التي ليس من السهل تحقيقها باستخدام CSS3.
هذه المقالة هي أول مكاسب من تعلم القماش. العرض التوضيحي الأول الذي يفعله الكثير من الناس عند تعلم القماش هو تنفيذ ساعة. بالطبع، قمت أيضًا بتنفيذ واحدة، ولكن بدلاً من الحديث عن هذا، سأتحدث عن شيء أكثر إثارة للاهتمام وأبسط الاشياء.
اضغط باستمرار على الماوس لرسم المسار يحتاجعلى اللوحة القماشية، لا يوجد شيء على اللوحة القماشية في الحالة الأولية. الآن، أريد إضافة بعض أحداث الماوس إلى اللوحة القماشية واستخدام الماوس للكتابة على اللوحة القماشية. التأثير المحدد هو تحريك الماوس إلى أي نقطة على اللوحة القماشية، ثم الضغط باستمرار على الماوس، وتحريك موضع الماوس، ويمكنك البدء في الكتابة!
مبدأدعونا نحلل الفكرة بإيجاز. أولاً، نحتاج إلى لوحة قماشية، ثم نحسب موضع الماوس على اللوحة القماشية، ونربط حدث onmousedown وحدث onmousemove بالماوس، ونرسم المسار أثناء الحركة ينتهي الرسم.
على الرغم من أن هذه الفكرة بسيطة جدًا، إلا أن هناك بعض الأجزاء التي تتطلب بعض الحيل لتنفيذها.
1. مطلوب ملف html، يحتوي على عناصر قماش.
هذه لوحة قماشية عرضها 800 وارتفاعها 400. لماذا لم تكتب بكسل؟ أوه، أنا لا أفهم ذلك بعد، فهو موصى به بواسطة مستند اللوحة القماشية.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-compatible content=ie=edge> <title>التعلم القماشي< /العنوان> <اسم التعريف = محتوى الوصف => <اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1> <الرابط rel = البيان href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 height =400></canvas> <script src=js/main.js></script> </body></html>
2. تحديد ما إذا كانت البيئة الحالية تدعم اللوحة القماشية.
في main.js، نكتب وظيفة ذاتية التنفيذ. فيما يلي مقتطف التعليمات البرمجية لحكم التوافق. سيكون النص الرئيسي للكود هو جوهر متطلبات التنفيذ.
(function() { Let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { // غير متوافق مع اللوحة القماشية return false } else { // نص الكود }})()3. احصل على الكائن ثنائي الأبعاد.
دع السياق = theCanvas.getContext('2d')4. احصل على إحداثيات الماوس الحالية بالنسبة إلى اللوحة القماشية.
لماذا نحتاج للحصول على هذا الإحداثي؟ نظرًا لأن الماوس يحصل افتراضيًا على الإحداثيات النسبية للنافذة الحالية، ويمكن وضع اللوحة القماشية في أي مكان على الصفحة، فإن العمليات الحسابية مطلوبة للحصول على إحداثيات الماوس الحقيقية.
يتم تضمين الحصول على الإحداثيات الحقيقية للماوس بالنسبة إلى اللوحة القماشية في وظيفة. إذا كنت تشعر بالتجريد، فيمكنك رسم صورة على ورقة مسودة لفهم سبب الحاجة إلى هذه العملية.
عادة، سيكون هذا x - rect.left وy - rect.top. ولكن لماذا هو في الواقع x - rect.left * (canvas.width/rect.width)؟
Canvas.width/rect.width يعني تحديد سلوك القياس في اللوحة القماشية والعثور على مضاعف القياس.
const windowToCanvas = (canvas, x, y) => { // احصل على بعض سمات نافذة مسافة عنصر اللوحة القماشية، الموضحة في MDN Let rect = Canvas.getBoundingClientRect() // يتم تمرير المعلمات x و y على التوالي من الماوس إحداثيات نافذة المسافة، ثم اطرح المسافة بين اللوحة القماشية واليسار والأعلى من النافذة. العودة { x: x - rect.left * (canvas.width/rect.width)، y: y - rect.top * (canvas.height/rect.height) }}5. باستخدام وظيفة الأداة في الخطوة 4، يمكننا إضافة أحداث الماوس إلى اللوحة القماشية!
قم أولاً بربط الحدث onmousedown بالماوس واستخدم moveTo لرسم نقطة البداية للإحداثيات.
theCanvas.onmousedown = function(e) { // احصل على إحداثيات النقطة التي يتم فيها الضغط على الماوس بالنسبة إلى اللوحة القماشية. Let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // تدمير مهمة es6 Let { x, y } = ele // نقطة البداية للرسم. context.moveTo(x, y)}6. عند تحريك الماوس، لا يوجد حدث ضغطة طويلة على الماوس، كيف يمكن مراقبته؟
الحيلة الصغيرة المستخدمة هنا هي تنفيذ حدث onmousemove (حركة الماوس) داخل onmousedown، بحيث يمكن مراقبة الماوس وتحريكه.
theCanvas.onmousedown = function(e) { // احصل على إحداثيات النقطة التي يتم فيها الضغط على الماوس بالنسبة إلى اللوحة القماشية. Let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // تدمير مهمة es6 Let { x, y } = ele // نقطة البداية للرسم. context.moveTo(x, y) // حدث تحريك الماوس theCanvas.onmousemove = (e) => { // احصل على موضع الإحداثيات الجديد عند التحرك، استخدم lineTo لتسجيل الإحداثيات الحالية، ثم قم بالضرب لرسم النقطة السابقة إليها مسار النقطة الحالية Let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) Let { x, y } = ele context.lineTo(x, y) context.stroke() }}7. عند تحرير الماوس، لن يتم رسم المسار بعد ذلك.
هل هناك أي طريقة لمنع الحدثين المذكورين أعلاه في حدث onmouseup؟ هناك العديد من الطرق لإعداد onmousedown وonmousemove إلى null، وهي إحدى الطرق التي استخدمتها هنا. يتم تعيين isAllowDrawLine على قيمة منطقية للتحكم في تنفيذ الوظيفة للحصول على الكود المحدد، يرجى الاطلاع على كود المصدر الكامل أدناه.
كود المصدروهو مقسم إلى 3 ملفات، وهي Index.html وmain.js وutils.js. وقد استخدمت صيغة es6 هنا لتكوين بيئة التطوير، لذلك لن تكون هناك أخطاء إذا قمت بنسخ الكود مباشرة ، عند التشغيل، في حالة حدوث خطأ وتعذر ترقية المتصفح، يمكنك تغيير بناء جملة es6 إلى es5.
1.index.html
لقد تم عرضه أعلاه ولن يتكرر مرة أخرى.
2.main.js
استيراد { windowToCanvas } من './utils'(function() { Let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { Let context = theCanvas.getContext ('2d') Let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true Let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) Let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { Let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) Let { x, y } = ele context.lineTo(x, y) context.stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** احصل على إحداثيات الماوس على اللوحة القماشية* */const windowToCanvas = (canvas, x, y) => { Let rect = Canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width) /rect .width)، y: y - rect.top * (canvas.height/rect.height) }}export { windowToCanvas} تلخيصهناك سوء فهم هنا، فأنا أستخدم كائن اللوحة القماشية لربط الحدث theCanvas.onmouseup. في الواقع، لا يمكن للقماش ربط الأحداث. ولكن نظرًا لأن المتصفح سيحكم عليك تلقائيًا ويسلم معالجة الأحداث، فلا داعي للقلق على الإطلاق.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.