اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'تحجيم'.

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • مقالات DevOps عامة
  • خوادم
    • الويب HTTP
    • البريد الإلكتروني
    • قواعد البيانات
    • DNS
    • Samba
  • الحوسبة السحابية
    • Docker
  • إدارة الإعدادات والنشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • مقالات عمل حر عامة
  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • العمل الحر المهني
    • العمل بالترجمة
    • العمل كمساعد افتراضي
    • العمل بكتابة المحتوى

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

  • الأقسام
    • أسئلة البرمجة
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات

التصنيفات

  • كتب ريادة الأعمال
  • كتب العمل الحر
  • كتب تسويق ومبيعات
  • كتب برمجة
  • كتب تصميم
  • كتب DevOps

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

تم العثور على 2 نتائج

  1. تعتبر الصور، أو العناصر المرئية بصورة عامة، عنصرًا أساسيًا وهامًا في أغلب المستندات التي نقوم بإنشائها. وتُستخدم بشكل عام من أجل توضيح فقرة مهمة في المستند. وفي أحيان كثيرة تستخدم كعنصر تزيين لزيادة جذب انتباه القرّاء واهتمامهم. سنتعلّم في هذا الدرس كل ما يتعلّق باستخدام الصور في ميكروسوفت وورد من الإدراج، إلى تطبيق مختلف أوامر التنسيق عليها كإعادة التحجيم، الاقتطاع، تعديل الأنماط، وغيرها. إدراج الصور يُتيح لنا ميكروسوفت وورد إمكانية إدراج الصور من مختلف المصادر والأنواع. إذ يمكن استخدام الصور المحفوظة على جهاز الحاسوب، أو البحث على الإنترنت وإدراج الصور بشكل مباشر دون الحاجة إلى حفظها. كما يمكن إدراج رموز وأيقونات مسبقة الصنع والتي يُشار إليها في وورد بالقصاصات الفنية Clip Art، أو حتّى إدراج لقطات شاشة Screenshot. لإدراج صورة من الجهاز، ببساطة نضع مؤشر الفأرة في الموضع الذي نريد إدراج الصورة فيه، ثم نذهب إلى إدراج صورة Insert > Pictures بشكل افتراضي سيفتح المتصفّح مجلّد الصور Pictures على الجهاز، وبالطبع يمكننا الانتقال إلى مجلّد آخر لاختيار الصورة المرغوبة. نحدّد الصورة ثم ننقر على Insert: سيتم إدراج الصورة عن موضع المؤشر، وسنلاحظ ظهور تبويب تنسيق Format السياقي الذي يحتوي على مجموعة كبيرة من الأدوات لتنسيق الصور، سنأتي إلى ذكرها في فقرة لاحقة من هذا الدرس: أمّا لإدراج صورة من الإنترنت، فبنفس الطريقة نضع مؤشر الكتابة في المكان الذي نريد إدراج الصورة فيه ثم نذهب إلى Insert> Online Pictures للبحث باستخدام متصفّح Bing ندخل الكلمة المفتاحية في حقل البحث ثم ننقر على أيقونة العدسة أو نضغط على مفتاح Enter: نلاحظ في الشريط العلوي لنتائج البحث وجود عدة عوامل تصفية، يمكن استخدامها لتقليص نطاق البحث والحصول على نتائج محدّدة. يمكننا مثلا البحث عن الصور بحجم صغير، أو الصور باللون الأحمر فقط، أو حتّى الصور المنشورة تحت رخصة المشاع الإبداعي فقط. وبعد أن نعثر على الصورة المرغوبة نقوم بتأشيرها والنقر على زر إدراج لإدراجها في المستند. علمًا أنّه يمكن تأشير وإدراج أكثر من صورة دفعة واحدة: وبنفس الطريقة يمكننا إدراج قصاصات فنية Clip Art. ندخل الكلمة المفتاحية في حقل البحث، وعند ظهور النتائج نحدد الخيار قصاصة فنية من عامل التصفية "النوع"، ثم نحدد الصورة المرغوبة وننقر على إدراج: يمكن أيضًا من مربّع الخيار Insert Pictures إدراج الصور المحفوظة على OneDrive، أو من على فيس بوك أو Flickr. وبالتأكيد الربط بهذه الخدمات يتطلّب إدخال معلومات الحساب: البريد الإلكتروني والكلمة السرية. أمّا لإدراج لقطة شاشة، فنبدأ أيضًا بوضع مؤشر الفأرة في المكان الذي نري إدراج لقطة الشاشة فيه، ثم ننقر على أمر Screenshot من تبويب Insert: ستظهر عند النقر النوافذ المفتوحة حاليًا والتي يمكن عمل لقطة شاشة لها، ننقر على النافذة المرغوبة وسيتم إدراج اللقطة على الفور: نلاحظ أنّ لقطة الشاشة يتم عملها لكل شيء داخل إطار النافذة، فإذا رغبنا في أن تكون اللقطة لجزء معيّن من النافذة ننقر على الخيار Screen Clipping: ستعرض آخر نافذة فُتحت قبل تطبيق أمر Screen Clipping، وعندها يمكننا تحديد الجزء المرغوب بالنقر ثم السحب والإفلات لإدراج ذلك الجزء مباشرة: اقتطاع الصور، إعادة تحجيمها، وضغطها يوفّر وورد أداة اقتطاع الصور Crop لقص جزء معيّن من الصورة وإخفائه، وترك الجزء المتبقّي ظاهرًا في المستند. لاقتطاع جزء من الصورة نقوم بتحديدها أولًا لإظهار تبويب Format السياقي، ثم ننقر على أمر Crop من مجموعة Size: سنلاحظ تحوّل مقابض الزوايا إلى شكل زويا سوداء اللون، والمقابض العلوية والسفلية إلى خطوط مستقيمة سوداء أيضًا، ننقر على أحد المقابض ونسحب إلى الداخل لاقتطاع الجزء الذي نريد التخلّص منه: سيتحول الجزء الذي سيتم قصّه إلى لون رمادي غامق، ننقر على مفتاح Enter لإتمام عملية الاقتطاع. يمكننا أيضًا اقتطاع الصورة بشكل معيّن نختاره من قائمة الأشكال وليس بشكل مستطيل فقط. للقيام بذلك ننقر على السهم الصغير تحت أمر Crop نمرر مؤشر الفأرة فوق الخيار Crop to Shape ثم ننقر على الشكل المرغوب: وإذا رغبنا في اقتطاع الصورة بنسبة طول إلى عرض معيّنة، نختار أحد الخيارات في قائمة Aspect Ratio: أمّا إعادة تحجيم الصور فتتم أيضًا من الخيارات في مجموعة Size. إذا كان حجم الصورة التي قمنا بإدراجها كبيرًا بحيث يتعدّى عرض الصفحة، سيقوم وورد بشكل افتراضي بإعادة تحجيمها لتلائم عرض المنطقة بين الهوامش. على سبيل المثال، إذا قمنا بتشغيل مربّع الحوار Layout للصورة المدرجة الموضّحة، سنلاحظ أنّ حجمها الأصلي Original Size أكبر من الحجم المعروض في المستند Absolute Size. أي أنّه تم تصغير الصورة الكبيرة لتناسب عرض الصفحة: وللتحكم في حجم الصورة يدويًا، نستخدم الخيارين Shape Height وShape Width في مجموعة Size. ننقر على السهم العلوي لزيادة الطول/العرض، أو السهم السفلي لإنقاص الطول/العرض. أو لنكون أكثر تحديدًا ندخل البعد المرغوب في الحقل: عندما نقوم بزيادة أو إنقاص طول الصورة مثلًا، سنلاحظ أنّ العرض يتغيّر أيضًا نسبة لتلك الزيادة أو النقصان، والسبب هو أنّ الخيار Lock Aspect Ratio مؤشر بشكل افتراضي للحفاظ على الأبعاد متوازنة: ويمكننا دائمًا إلغاء تأشير هذا الخيار إذا رغبنا في تغيير طول الصورة أوعرضها بشكل مستقل. الطريقة الأخرى لإعادة تحجيم الصورة هي باستخدام المقابض. نستخدم مقابض الزاوية لزيادة/إنقاص الطول والعرض معًا وبشكل متوازن، أما المقابض الجانبية والعلوية/السفلية فنستخدمها لزيادة/إنقاص كل بعد على حِدة: من الخيارات المفيدة التي يوفّرها وورد هو ضغط الصور Compress لتقليل حجمها وبالتالي تقليل حجم المستند عند الحفظ. فمن البديهي أنّ الصور ذات الحجم الكبير تؤدي إلى زيادة حجم المستند، وهذا الأمر غير محبّذ إذا كان المستند يحتوي على كثير من الصور ورغبنا في مشاركته مع الآخرين. كما أنّ الصور ذات الحجم الكبير يمكن أن تجعل العمل على المستند بطيئًا إذا احتوى على الكثير منها. على سبيل المثال، المستند أدناه يشتمل على صفحة واحدة مدرج فيها صورة بحجم كبير: فإذا قمنا بحفظ الملف سنلاحظ أنّ حجمه يزيد على 300 كيلوبايت، وهذا الحجم كبير بالنسبة لمستند من صفحة واحدة فقط: لضغط هذه الصورة نحددها ثم ننقر على أمر Compress Pictures من تبويب تنسيق السياقي: سيُفتح مربع الحوار Compress Pictures الذي يحتوي على مجموعة خيارات لتقليل حجم الصورة: سيكون الخيار Apply only to this picture مؤشرًا بشكل افتراضي، ويمكننا تركه كما هو إذا كنا نريد ضغط الصورة الحالية فقط، أمّا إذا كانت لدينا الكثير من الصور في المستند ونريد ضغطها دفعة واحدة فنلغي تأشير هذا الخيار. الخيار Delete cropped areas of picture أيضًا مؤشر بشكل افتراضي. وهو خيار مفيد يقوم بحذف الأجزاء المقتطعة من الصور. فكما ذكرنا في فقرة سابقة أنّه عند اقتطاع الصورة يتم إخفاء الجزء غير المرغوب منها وليس حذفه، أي أنّه سيبقى محفوظًا على المستند ويمكن استرجاعه عند الحاجة بتحديد الصورة والنقر على أمر Crop. فلحذف تلك الأجزاء المقتطعة نهائيًا وتقليص حجم المستند نبقى هذا الخيار مؤشرًا. بعد ذلك ننتقل إلى خيارات الضغط ونحدد الخيار المرغوب: Print: لحفظ الصورة بحجم كبير لأغراض الطباعة وغيرها. Screen: لحفظ الصورة بحجم متوسط لأغراض العرض على صفحات الويب أو على أجهزة العرض على الشاشة. E-mail: لحفظ الصورة بحجم صغير لغرض المشاركة. سنحدد الخيار Email ونحفظ المستند باسم جديد لنلاحظ الفرق في الحجم: فرق كبير بين 307 كب و36 كب! خاتمة لقد غطّينا لحد الآن كيفية إدراج الصور من مختلف المصادر والأنواع بالإضافة إلى اقتطاعها والتحكّم في أبعادها وأحجامها عند الحفظ. في الجزء الثاني من هذا الدرس سنكمل الشرح حول استخدام المزيد من خيارات تبويب Format لتخصيص مظهر الصورة وموضعها داخل المستند.
  2. سنتطرّق في هذا الدّرس إلى طريقة إنشاء رسم بياني باستخدام Canvas قبل أن نتطرّق إلى بعض عمليات التّعديل على الصّور وبعض التّحولات، ثم سنختم بإنشاء معرض جميل للصّور. أنصحم بالاطّلاع على المقالات السّابقة حول Canvas هنا على أكاديمية حسوب قبل مواصلة القراءة. رسم الصور تُستخدم الدالة ()drawImage لتصيير الكائن image على العنصر canvas، تأخذ الدالة ()drawImage عدة أشكال overloaded وذلك بتغيير نوع وعدد المعاملات كما سنرى في الأمثلة المقبلة. الشكل الأول: drawImage(image, x, y) تقوم برسم CanvasImageSource محدّدة بالمعامل image في الإحداثيات (x,y). رسم خط بياني بسيط باستخدام الدالة ()drawImage سأعرض مثالًا يستخدم صورة خارجية كخلفية لرسم خط بياني بسيط. يتيح لك استخدام الخلفيات أو backdrops من أن تجعل السكربت الخاص بك أصغر بكثير وتجنب الحاجة لكتابة الشيفرات البرمجية لتوليد الخلفية. سأستخدم في هذا المثال صورة واحدة لذا يمكنني استخدام معالج حدث التحميل load event handler لتنفيذ جمل الرسم. تقوم الدالة ()drawImage بوضع صورة الخلفية عند الإحداثيات (0, 0) والمحدّدة بالزاوية اليسارية العليا للعنصر canvas. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,,); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } سيظهر الرسم البياني مع صورة الخلفية على الشكل التالي: التحجيم Scaling تتيح لك الدالة ()drawImage تحديد حجم الصور وفق ما ترغب وذلك بإضافة معاملين إضافيين هما الطول والعرض: drawImage(image, x, y, width, height) من خلال الخاصيتين width و height تستطيع إعطاء الحجم المناسب للصورة عند رسمها على الـ canvas. تبليط صورة Tiling an image في المثال التالي سأستخدم الصورة أدناه وأكررها عدّة مرات على مساحة الـ canvas بعد تحجيمها لتبدو كلوحة جدارية. سنحتاج لإنشاء حلقتي تكرار واستدعاء الدالة: drawImage(image, x, y, width, height) مع تغيير إحداثيات رسم الصورة كل مرة، ستكرر الحلقة الأولى الصورة عبر الصفوف والحلقة الثانية ستكرر الصورة عبر الأعمدة. سأقوم بتحجيم الصورة إلى ثلث حجمها الأصلي وهو 50x30 بكسل. ملاحظة: قد تبدو الصور ضبابية عند التحجيم وذلك بحسب نوع التحجيم (تكبير أو تصغير) كذلك إن كانت بعض الصور تحوي نصوصًا قد يؤدي تصغير حجمها إلى جعل النصوص غير مقروءة. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ for (var i=;i<4;i++){ for (var j=;j<3;j++){ ctx.drawImage(img,j*50,i*38,50,38); } } }; img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; } ستظهر الصورة على الشكل التالي: استعرض المثال على jsfiddle. التشريح Slicing الاستخدام الثالث والأخير للدالة ()drawImage هو قص الصور حيث تأخذ الدالة ثمان معاملات: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) تحدد الدالة أعلاه مساحة الصورة التي يحددها المستطيل الذي زاويته اليسارية العليا محدّدة بـ (sx, sy) وطوله وعرضه محدّد بـ (sWidth ، sHeight) وتقوم برسمه على الـ canvas في الموضع (dx, dy) وتحدد قيمة التحجيم بالمعاملين (dWidth و dHeight). لتستطيع فهم عمل المعاملات بوضوح انظر للصورة التالية: كما تلاحظ أنه تم تحديد مساحة الصورة المراد قصها اعتمادًا على قيمة المعاملات في الدالة: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) تعتبر أداة التشريح او القص مفيدة عندما تريد عمل تراكيب حيث يمكن أن يكون لديك عدة عناصر في ملف صورة واحد وتستخدم الدالة ()drawImage لتجميعها برسم كامل على سبيل المثال يمكنك أن تقوم بإنشاء رسم بياني كصورة png وتكون كل النصوص اللازمة لوضعها على الرسم البياني موجودة في ملف واعتمادًا على البيانات يمكنك تغيير حجم الرسم البياني بكل سهولة. ميزة أخرى في عمل تركيبات الصور هي أنك لن تكون بحاجة لتحميل كل صورة على حدة والذي يمكن أن يحسن من أداء التحميل. تأطير الصورة Framing an image سأقوم بعرض مثال أستخدم فيه نفس الصورة السابقة لقصها باستخدام الدالة ()drawImage ووضعها بداخل إطار Frame: <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <div style="display:none;"> <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> </div> </body> </html> function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw slice ctx.drawImage(document.getElementById('source'), 33, 71, 104, 124, 21, 20, 87, 104); // Draw frame ctx.drawImage(document.getElementById('frame'),,); } ستظهر الصورة على الشكل التالي: استعرض المثال على jsfiddle. إنشاء معرض فني Art Gallery حان الوقت الآن لإنشاء معرض صور واستخدام الأدوات التي تعلمناها في التعامل مع الصور في canvas سيكون المعرض عبارة عن جدول يحوي مجموعة صور. عند تحميل الصفحة يقوم العنصر canvas بإدراج الصور ورسم إطار حول كل صورة. في حالتنا هذه سيكون لكل صورة طول وعرض ثابتين وكذلك الإطار. سنقوم باسترداد صورة الإطار من الرابط: https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png ثم إنشاء حلقة تكرار للإنشاء رقعة canvas لكل صورة ومن ثم رسم الصورة ويتم ذلك باستخدام الدالة: parentNode.insertBefore تقوم هذه الدالة بإدراج الصورة قبل إدراج عنصر canvas في عناصر DOM: // Insert before the image document.images.parentNode.insertBefore(canvas,document.images); بعد إنشاء عنصر canvas وإدراج الصورة نقوم باستخدام سياق التصيير واستدعاء الدالة ()drawImage لرسم الصورة على الرقعة: ctx.drawImage(document.images,15,20); إضافة بعض التنسيقات CSS: body { background: -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; margin: 10px; } img { display: none; } table { margin: auto; } td { padding: 15px; } السكربت أدناه يقوم برسم الصور مع الإطار: function draw() { // Loop through all images for (var i=;i<document.images.length;i++){ // Don't add a canvas for the frame image if (document.images[i].getAttribute('id')!='frame'){ // Create canvas element canvas = document.createElement('canvas'); canvas.setAttribute('width',132); canvas.setAttribute('height',150); // Insert before the image document.images[i].parentNode.insertBefore(canvas,document.images[i]); ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(document.images[i],15,20); // Add frame ctx.drawImage(document.getElementById('frame'),,); } } } ستظهر الصورة على الشكل التالي: استعراض المثال على jsfiddle. التحكم بسلوك التحجيم Scaling Behavior كما ذكرت سابقًا أن عملية تحجيم الصورة يمكن أن تؤدي إلى تشويهها أو جعلها تبدو غير واضحة. يمكنك استخدام الخاصية imageSmoothingEnabled للتحكم باستخدام خوارزمية تنعيم أو تمهيد الصورة Smoothing وذلك بتحديد القيمة التي تأخذها إما true أو false ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; التحولات Transformations يوفّر سياق التصيير Rendering Context في canvas مجموعة من الدوال لتطبيق التحولات على الأشكال في canvas كالتحريك، النقل، الدوران والتحجيم حيث يمكنك تطبيق هذه الخصائص بطرق مختلفة على الأشكال البسيطة في الرقعة canvas والحصول على أشكال معقدة أو متحركة بكل سهولة. قبل البدء بالتعرّف على دوال التحولات التي يوفرها سياق التصيير دعونا نلقي نظرة على حالتين لا غنى عنهما سنستخدمهما بمجرد البدء بتوليد أشكال معقدة باستخدام خصائص التحويل في canvas. حالتي الحفظ والاستعادة Saving and restoring state ()save: تقوم هذه الدالة بحفظ الحالة التي تكون عليها الرقعة في الوقت الحالي. ()restore: تعيد هذه الدالة أحدث حالة كانت عليها الرقعة canvas. يتم تخزين حالات الرقعة في الـ stack أو المجمع حيث أنه في كل مرة يتم فيها استدعاء الدالة ()save يتم وضع حالة الرسم الحالية في المجمع. مم تتكون حالة الرسم؟ تتكون حالة الرسم من العناصر التالية: التحولات التي يمكن تطبيقها في سياق التصيير كالنقل translate، الدوران rotate والتحجيم scale. القيم الحالية للخصائص التالية: strokeStyle, fillStyle globalAlpha lineWidth, lineCap, lineJoin miterLimit lineDashOffset shadowOffsetX, shadowOffsetY shadowBlur, shadowColor globalCompositeOperation font, textAlign, textBaseline direction imageSmoothingEnabled مسار clipping path الحالي. ملاحظة: يمكنك استدعاء الدالة ()save عدة مرات كما تريد. في كل مرة يتم فيها استدعاء الدالة ()restore يتم أخذ آخر حالة حفظ موجودة في المجمع واسترجاع جميع الإعدادات الأخيرة المحفوظة. سنكمل في الدرس المقبل شرح دوال التحولات وعرض مثال واضح عن استخدام حالتي الحفظ والاستعادة في سياق التصيير بالإضافة إلى شرح التحولات وطرق التعامل معها مع عرض مثال لكل خاصية تحول لترى كيف يمكنك عمل مجموعة من الأشكال المعقدة وتحريكها على عنصر الرقعة canvas. المصادر
×
×
  • أضف...