اخترق تقييد بناء جملة القماش لتمكينه من دعم بناء جملة السلسلة

دعونا نلقي نظرة أولاً على لوحة طبيعية رسم القواعد النحوية:

CTX.ARC (CenterX ، Centery ، RADIUS ، 0 ، PI*2 ، true) ؛

ctx.shadowcolor = 'rgba (0،0،0،0.5)' ؛

ctx.shadowblur = "10" ؛

ctx.fill () ؛

ctx.beginpath () ؛

ctx.shadowcolor = 'rgba (0،0،0،0)' ؛

CTX.Moveto (Centerx-Radius ، Centery) ؛

CTX.Lineto (Centerx -Radius ، Centery - 50) ؛

CTX.Lineto (Centerx+Radius ، Centery - 50) ؛

CTX.LINETO (CenterX+RADIUS ، Centery) ؛

// CTX.Lineto (Centerx-Radius ، Centery) ؛

ctx.fill () ؛

ctx.beginpath () ؛

ctx.fillstyle = 'rgba (255،0،0،1)' ؛

CTX.ARC (CenterX ، Centery-50 ، RADIUS ، 0 ، PI*2 ، true) ؛

ctx.fill () ؛

هناك شيئان لست سعيدًا ببنائها الأصلي للقماش: 1. كل جملة كتبت CTX (أي كائن Context2D من القماش) ، و 2

لدي الكثير من التقدير لبناء سلسلة سلسلة JQuery ، مثل:

$ ('#div1'). show (300) .html (p) .Delay (3000) .Slideup (300) .remove () ؛

لذلك ، أريد أيضًا استخدام هذا الجملة للقيام برسم قماش:

CTX.Moveto (500،0) .lineto (500،500). Strokestyle ('#f00'). Stroke () ؛

هناك طريقة لمحاكاة كائن Context2D. يدعم هذا الكائن جميع أساليب Context2D الأصلية ، ولكنه يدعم أيضًا طرقًا بالسلاسل.

ومع ذلك ، لا يمكن أن يكون هناك الكثير من التعليمات البرمجية ، حيث لن يكون هناك المزيد يحب استخدامه.

ما يلي هو قطاع الكود الكامل. لقد سميت هذا الفئة XtendCanvas (يبدأ بـ x مرة أخرى):

// دع بناء جملة سلسلة دعم القماش ، من عشر سنوات من الضوء

~ function () {var pro = ['Save' ، 'Restore' ، 'Scale' ، 'Rotate' ، 'Translate' ، 'Transform' ، 'CreateLineargradient' ، 'CreaterAdialGradient' ، 'Getlinedash' ، 'ClearRecto' ، Quadrect '،' Beginpath '،' clostepath '،' Moveto '، "Beziercurveto" ، "Arcto" ، "Rect" ، "Arc" ، "Fill" ، "Stroke" ، "Clip" ، "IsPointInpath" ، "MeasureText" ، "Clearshadow" ، "FillText" ، "stroketext" ، "strokerex "getImagedata" ، "linewidth" ، "Strokestyle" ، "Globalalpha" ، "FillStyle" ، "Font" ، "Shadowoffsetx" ، "Shadowoffsety" ، "Shadowblur" ، "Shadowcolor" ، "Linecap" ، "line loin" ، "miterlimit"] ؛

وظيفة XtendCanvas (قماش) {

var ctx = canvas.getContext ('2d') ،

fn = function () {} ،

fnp = fn.prototype ؛

لـ (var j = 0 ، p = pro [0] ؛ p ؛ p = pro [j ++]) {

fn.prototype [p] = function (p) {

وظيفة الإرجاع () {

var args = array.prototype.slice.call (وسيطات) ؛

// console.log (args) ؛

if (typeof ctx [p] == 'function') {

ctx [p] .apply (ctx ، args) ؛

} آخر {

ctx [p] = args+'' ؛

}

إرجاع FNP ؛

} ؛

} (p) ؛

}

إرجاع FN الجديد ؛

} ؛

window.xtendcanvas = xtendcanvas ؛

} () ؛

طريقة الاستخدام بسيطة للغاية. تمرير كائن قماش وسيعيد كائن مشابه لـ Context2D. يمكنك استخدامه مثل Context2d العادي ، ولكن الفرق هو أنه يدعم بناء الجملة سلسلة:

var cvs = document.getElementById ('cvs') ؛

var ctx = xtendcanvas (cvs) ؛

CTX.Moveto (500،0) .lineto (500،500). Strokestyle ('#f00'). Stroke () ؛

وبهذه الطريقة ، يمكنك وضع جميع العمليات في جملة واحدة ، ويمكنك المقاطعة في أي وقت ، والقيام بأشياء أخرى ، ثم المتابعة.

هذا الرمز ليس تحسينًا على قماش ، فهو يدعم ببساطة بناء جملة السلسلة. ولكن الميزة هي أن هناك القليل من التعليمات البرمجية ويمكن تضمينه في أي مكتبة JS. آمل أن أحصل على توصية منك هنا

هناك بالتأكيد شيء يستحق التحسين في الكود ، ويمكن للجميع تحسينه بمفرده. لكن - لا أنسى حفر الآبار عندما أرسم الماء. أتمنى أن يتذكرني الجميع. أهم شيء هو الفكرة ، أليس كذلك؟ هذه هي الفكرة:

كما ترون ، فإن أطول جزء من الكود هو Array Pro الذي يحفظ اسم الطريقة ، والرمز الأساسي قصير جدًا. لماذا أريد بناء مثل هذا الصفيف؟

في الأصل ، أردت أيضًا أن أرث جميع الأساليب الأصلية مباشرة من CanvasrenderingContext2d ، لكن كل متصفح اجتاز اللسان canvasrenderingcontext2d ، وكانت النتائج غير متسقة. إذا ورثتها مباشرة ، ثم عندما تريد استخدام الطريقة في Chrome لتنفيذها ، سيتم الإبلاغ عن خطأ.

لذلك قمت للتو باستخراج الأساليب المشتركة وغير المستمدة وأسماء السمات في CanvasrenderingContext2d. لا توجد طريقة ، لا يمكنني سوى إنشاء صفيف ثابت - يمكن للجميع أن يقرر إضافة طريقتك إليها.

يتم استخراج الطرق والسمات ، ثم تتم إضافة الأساليب الأصلية إلى كائني الجديد. لقد قمت ببناء وظيفة فارغة تسمى FN ووضعت طريقتي.

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

وبهذه الطريقة ، عندما تواجه إعداد سمة القماش ، لا تحتاج إلى مقاطعة الرابط ، ما عليك سوى تمرير قيمة السمة كمعلمة ، على سبيل المثال:

CTX.Strokestyle ('#f00')

أخيرًا ، المفتاح هو إرجاع FN. تم تعلم هذه الخدعة من jQuery وهي مفتاح دعم بناء الجملة سلسلة.

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

يبدو من السهل جدًا القول ، لكنني فكرت في الأمر لفترة طويلة ، على أمل أن يكون ذلك مفيدًا للجميع.

أثناء عملية كتابة رمز ، وجدت أن Chrome يعمل بشكل جيد للغاية. يحتوي على سلسلة من الوظائف التي تبدأ بالمجموعة ، مثل SetStrokeColor و SetLinecap وغيرها من الوظائف. من خلال تمرير المعلمات إليهم ، يمكن أن يحل محل السمات المقابلة مثل Strokestyle و LinEcap. وبعبارة أخرى ، فإن قماشها مليء بالوظائف ولا توجد سمات ، لذلك لا يتعين علي الحكم على ما إذا كانت وظيفة أو سمة. ولكن لا يوجد شيء من هذا القبيل في Firefox ، لذلك لا يمكنني سوى استخدام الأفكار السابقة.

var bak = ['setTransform' ، 'Setalpha' ، 'SetCompositeOperation' ، 'SetlineWidth' ، 'Setlinecap' ، 'setlinejoin' ، 'setMiterLimit' ، 'Setlinedash' ، 'SetShadow' ، 'Setstrokecolor' ، 'setfillcolor'] ؛

يمكنهم فهم استخداماتهم في لمحة. يمكنك أيضًا تحديد بعض المصفوفات المحترفة التي تمت إضافتها إلى الكود السابق.

أخيرًا ، أتساءل لماذا لم يتم تمييز الكود الخاص بي. . . إذا رأيت النهاية ، فأعطيني توصية واسمحوا لي أن أكون عبثًا.