نموذج التعليمات البرمجية لكيفية استخدام اللوحة القماشية لتنفيذ التوقيع عبر الإنترنت

مع التطور السريع لتكنولوجيا الكمبيوتر والشبكات، يتم استخدام تقنية التوقيع عبر الإنترنت بشكل متزايد في المكاتب غير الورقية. لا يمكن لهذه العملية البديهية والمريحة أن تحسن كفاءة المكتب بشكل كبير فحسب، بل تستخدم أيضًا طرق التخزين الرقمية لتجنب المشكلات التقليدية مثل صعوبة التخزين والاسترجاع. التوقيعات الورقية. في حياتنا اليومية، هناك بالفعل العديد من السيناريوهات التي يتم فيها استخدام تقنية التوقيع عبر الإنترنت، مثل: توقيع جهاز نقطة البيع، أو توقيع التسليم السريع، أو التوقيع التجاري للبنك أو الوكالة الحكومية، وما إلى ذلك. أعمل مؤخرًا على تلبية احتياجات معالجة أعمال الشركة، والتي تتضمن أيضًا التوقيعات عبر الإنترنت. نستخدم تقنية Canvas لتنفيذها. بعد ذلك، دعونا نتحدث عن كيفية استخدام Canvas لتنفيذ التوقيعات عبر الإنترنت!

يعتبر Canvas عنصرًا جديدًا في HTML5، يُستخدم لرسم الرسومات على صفحات الويب، وقد تم تقديمه بواسطة Apple في متصفح الويب Safari 1.3. والسبب في توسيع HTML هو أنه يمكن استخدام إمكانيات الرسم الخاصة بـ HTML في Safari على نظام التشغيل Mac OS X سطح المكتب، وأرادت Apple أيضًا طريقة لدعم الرسومات المكتوبة في لوحة المعلومات. كما اتبع المتصفحان Firefox 1.5 وOpera 9 خطى Safari وبدأا في دعم Canvas.

الآن، تعد علامة Canvas واحدة من أعظم التحسينات في HTML5، لأنها تتيح لنا تنفيذ التصميم الرسومي لصفحات الويب دون استخدام الصور. إنها مثل اللوحة القماشية، ولكنها لا تحتوي على إمكانات رسم، ولكنها تعرض واجهة برمجة تطبيقات الرسم للعميل JavaScript، وبدعم من JavaScript، يمكننا استخدامها ضمن نطاق اللوحة القماشية لتحقيق التأثير المطلوب.

يمكن تنفيذ هذه الوظيفة سواء كانت Canvas أو SVG أو Flash، ولكن لماذا اخترنا Canvas؟

بادئ ذي بدء، نظرًا لأننا نحتاج إلى دعم الأنظمة الأساسية للجوال وظيفيًا، فيمكننا التخلي عن Flash مباشرةً، فهو لا يتمتع بدعم سهل على الجانب المحمول، ولكن يتمتع كل من Canvas وSVG بقدرات جيدة عبر الأنظمة الأساسية.

• يعتمد Canvas على وحدات البكسل ويوفر وظائف رسم ثنائية الأبعاد أكثر بدائية ومناسبة لمعالجة البكسل والعرض الديناميكي ورسم حجم البيانات الكبير، وهو قابل للتحكم بشكل كبير ولا يسجل أداء الرسم بشكل أساسي أفضل الشركات المصنعة أيضًا تم تطبيق آلية تسريع الأجهزة الخاصة بالقماش منذ فترة طويلة.
• SVG عبارة عن ناقل يوفر سلسلة من العناصر الرسومية بوظائف أكثر اكتمالًا وينشئ عددًا كبيرًا من الكائنات التفاعلية، وهو أفضل في التفاعل مع الطبيعة، لكن أدائه سيكون أضعف، وهو أكثر ملاءمة لعرض الصور الثابتة - دقة عرض المستندات وطباعة سيناريوهات التطبيق.

لكل منهما مجالات خبرته الخاصة. بناءً على ما سبق، اخترنا Canvas لتنفيذ وظيفة التوقيع.

بعد ذلك، دعونا نلقي نظرة على تأثير التنفيذ.

بعد فهم مصدر Canvas واختيار التكنولوجيا وتأثير العرض النهائي، سنكتب من الأجزاء الخمسة للإنشاء والرسم والمراقبة وإعادة الرسم ومعالجة الصور، فلندخل معًا إلى عالم رسم Canvas.

أولاً، نحتاج إلى تحديد ما إذا كان المتصفح يدعم Canvas:

 isCanvasSupported = (): boolean => { Let elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}

ثم اختر إنشاء لوحة قماشية أو عرض المطالبات بناءً على نتائج الحكم.

 {isCanvasSupported ? <canvas ref={canvas => (this.canvas = Canvas)} height={canvasHeight} width={canvasWidth}> :عذرًا، المتصفح الحالي لا يدعم هذه الميزة! }

نحن نعلم أن كل عقدة Canvas لها كائن سياق مطابق، والذي يمكننا الحصول عليه عن طريق تمرير السلسلة 2d مباشرة كمعلمة وحيدة لها من خلال طريقة getContext() لكائن Canvas. بعد ذلك، نحصل على عنصر Canvas من خلال المرجع، ثم نحصل على بيئة رسم على اللوحة القماشية من خلال طريقة getContext().

 Let cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});

البيئة جاهزة، فلنبدأ بالرسم!

أولاً ارسم مسار البداية:

 cxt.beginPath();

ثم قم بتعيين عرض السطر الحالي:

 cxt.lineWidth = 5;

ضبط لون الخط:

 cxt.strokeStyle = '#000';

من خلال moveTo وlineTo، نرسم خطًا

 cxt.moveTo(0,0);cxt.lineTo(150,0);// ارسم المسار المحدد cxt.stroke()

ومع ذلك، وجدنا أن الخطوط المرسومة كانت قاسية إلى حد ما

في هذا الوقت، يمكننا تغيير نمط أغطية الخطوط في نهاية السطر من خلال lineCap، وإضافة أغطية خطوط مستديرة إلى كل طرف لتقليل صلابة الخطوط.

 cxt.lineCap = 'round';

في الوقت نفسه، يمكننا أيضًا تحديد الزوايا الدائرية عندما تتقاطع الخطوط عن طريق ضبط lineJoin.

 cxt.lineJoin = 'round';

ولكننا وجدنا أيضًا أن الخطوط المرسومة لها حواف خشنة واضحة، نحتاج في هذا الوقت إلى استخدام وظيفة رسم ظلال العناصر التي توفرها Canvas لطمس الحواف الخشنة، نظرًا لوجود الظلال، يمكننا تغيير قيمة عرض الخط بشكل مناسب.

 cxt.shadowBlur = 1;cxt.shadowColor = '#000';

هل أصبحت أكثر استدارة في هذه المرحلة، طريقتنا في رسم الخطوط جاهزة بعد ذلك، دعونا نلقي نظرة على كيفية مراقبة أحداث اللوحة لتحقيق التنفيذ المتسق للرسم!

نظرًا لأننا بحاجة إلى أن نكون متوافقين مع كل من أجهزة الكمبيوتر الشخصية والأجهزة المحمولة، نحتاج إلى تحديد أحداث التنفيذ المقابلة مسبقًا.

 this.state = {events: ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}

بعد تهيئة اللوحة القماشية، نبدأ في الاستماع إلى الأحداث events[0].

 this.canvas.addEventListener(this.events[0], startEventHandler, false);

استمع للأحداث[1] والأحداث[2] في الدالة startEventHandler

 this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);

هنا تأتي النقطة، المحتوى الأساسي لدينا هو حساب ورسم المسار المتقاطع

 moveEventHandler(event: Any): void { events.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch ? ; const mouseX = evt.clientX - CoverPos.left; evt.clientY - CoverPos.top;

كما تعلم عن Canvas، فإن Canvas توفر لنا مساحة مسطحة للرسم. كل نقطة في المساحة لها إحداثياتها الخاصة، حيث يمثل x الإحداثي الأفقي، ويمثل y الإحداثي الرأسي. يقع الأصل (0، 0) في الزاوية اليسرى العليا من الصورة، الاتجاه الإيجابي للمحور x هو على يمين الأصل، والاتجاه الإيجابي للمحور y هو للأسفل من الأصل.

لذلك نستخدم طريقة getBoundingClientRect() للحصول على مسافة البكسل إلى يسار وأعلى عنصر Canvas الخاص بالصفحة بالنسبة لموضع نافذة المتصفح، ثم نستخدم خصائص حدث ClientX وclientY لإرجاع الإحداثيات الأفقية والرأسية لـ مؤشر الماوس إلى صفحة المتصفح عند تشغيل الحدث، وأخيرًا، يتم رسم المسار باستخدام الخط والسكتة الدماغية.

في الوقت نفسه، يجب أن نتذكر إزالة الأحداث[1] والأحداث[2] بعد تنفيذ حدث الأحداث[2]، وإلا فسوف يتسبب ذلك في الرسم المستمر.

 endEventHandler(event: Any): void { events.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); الأحداث[2]، endEventHandler، false)؛}

من خلال تكرار عمليات الأحداث المذكورة أعلاه، يتم تحقيق وظيفة التوقيع بشكل أساسي.

أثناء عملية التوقيع، لا مفر من التوقيع بشكل غير صحيح أو التوقيع بشكل غير متقن، لذلك نحتاج إلى دعم وظيفة مسح التوقيع. في هذا الوقت، نستخدم طريقة ClearRect () الخاصة بـ Canvas لمساعدتنا في مسح محتوى الملف منطقة قماش.

 cxt.clearRect(0, 0, CanvasWidth, CanvasHeight);

بعد الرسم، لم ننتهي بعد، مازلنا بحاجة إلى تحميل التوقيع المرسوم وحفظه. في الوقت الحالي، يمكننا استخدام طريقة toDataURL() لتحويل اللوحة القماشية إلى نموذج ملف صورة عام.

عادةً ما يمكننا إجراء العملية مباشرةً لتحويلها إلى URI للبيانات، ثم استخدام ajax لطلب التحميل وهذا كل شيء.

 dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);

ومع ذلك، نظرًا لاحتياجات العمل المختلفة، نحتاج أحيانًا إلى حمل محتوى آخر على الصفحة. في هذا الوقت، يمكننا استخدام html2canvas لتحقيق ذلك. يمكن أن يساعدنا html2canvas في التقاط لقطة شاشة لكامل الصفحة أو جزء منها على جانب المتصفح وعرضها في Canvas، ثم نستخدم طريقة toDataURL() لمعالجتها.

بالحديث عن html2canvas، دعني أقدم لك نصيحة خاطئة: الصور التي يتم قطعها في بعض المتصفحات ذات الإصدار المنخفض تكون فارغة والسبب هو استخدام التخطيط المرن، ولا يدعم html2canvas -webkit-flex أو -webkit-box. لذلك لا يمكن إنشاء HTML في Canvas، مما يؤدي إلى التقاط شاشة بيضاء.

• عدم استخدام التخطيط المرن
• قم بتعديل كود مصدر html2canvas، وأضف -webkit-flex و-webkit-box إلى ملف html2canvas/dist/npm/parsing/display.js وقم أيضًا بإرجاع ملخص DISPLAY.FLEX؛

من خلال الخطوات المذكورة أعلاه، أدركنا بشكل أساسي وظيفة التوقيع عبر الإنترنت. تجدر الإشارة إلى أننا استخدمنا بيئة React+TypeScript لبناء هذا المشروع. يجب تعديل الاستخدام الفعلي للكود أعلاه بشكل مناسب بناءً على بيئتك الخاصة.

تستخدم هذه المقالة معرفة رسم ضحلة نسبيًا عن Canvas. إذا أردنا استخدام Canvas لإنتاج الرسوم المتحركة، ومحاكاة التأثيرات المادية، واكتشاف الاصطدام، وتطوير الألعاب، وتطوير تطبيقات الهاتف المحمول، وتطوير تصور البيانات الضخمة، فإننا نحتاج أيضًا إلى مراجعة الهندسة الرياضية التي لدينا. تعلمت من قبل، والمعرفة الفيزيائية، ومن ثم استكشاف ببطء. في الوقت الحاضر، يتم تنفيذ العديد من المكونات الإضافية للمخططات الناضجة باستخدام Canvas، مثل Chart.js وECharts وما إلى ذلك. وهناك العديد من المخططات الجميلة والرائعة فيها، والتي تغطي جميع تطبيقات المخططات تقريبًا. يحتوي Canvas أيضًا على العديد من المكتبات مفتوحة المصدر، مثل ZRender و createJS و Pixi.js وما إلى ذلك. وتعتمد الطبقة السفلية من ECharts أيضًا على مكتبة فئة Canvas خفيفة الوزن ZRender للتغليف.

حسنًا، فلنتوقف عن الحديث هنا اليوم، إذا كان لديك أي أسئلة، فيرجى ترك رسالة. ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.