تعليق: في المقال السابق ، تحدثت عن طريقة رسم المستطيلات والدوائر. لديهم جميعها وظائف رسم قماش أصلية يمكن إكمالها. لا يمكن محاكاة المستطيل الدائري المذكور في هذه المقالة إلا من خلال طرق أخرى. نستخدم القدرة على تقسيم السطح إلى خطوط ، ومن السهل العثور على أن المستطيل المدور يتكون بالفعل من 4 منحنيات تشبه الخطاف. يمكن للأصدقاء المهتمين التعرف على ذلك.
في المقالة السابقة ، تحدثت عن طرق رسم المستطيلات والدوائر. لديهم جميعها وظائف رسم قماش أصلية يمكن إكمالها. لا يمكن محاكاة المستطيل الدائري المذكور في هذه المقالة إلا من خلال طرق أخرى.بالنسبة للمستطيل المستدير العادي ، دعنا نفترض أولاً أن الزوايا المستديرة في زواياها الأربع متشابهة - لأن هذا أسهل في الرسم. نستخدم القدرة على تقسيم السطح إلى خطوط ومن السهل العثور على أن المستطيل المدور يتكون بالفعل من 4 منحنيات تشبه الخطاف.
عند الحديث عن السنانير ، إذا كنت قد قرأت مقالتي التي تقدم Arcto ، فقد تفهم على الفور أنه يمكن رسم هذا النوع من الرسم البياني باستخدام Arcto.
عندما تحدثت عن Arcto ، ذكرت أن Arcto لديه خاصية مفادها أن امتداد الظل الثاني لن يؤثر على الخطوط التي يرسمها (في الجزء الأخير أعلاه) ، والتي توفر أيضًا الراحة لنا لرسم مستطيلات مستديرة دون القلق بشأن التشوه.
فيما يلي طريقة رسم المستطيلات المستديرة التي وجدتها على موقع ويب أجنبي ، والتي يجب أن تكون الأكثر كفاءة.
// المستطيل المستدير
canvasrenderingContext2d.Prototype.RoundRect = function (x ، y ، w ، h ، r) {
if (w & lt ؛ 2 * r) r = w / 2 ؛
if (h & lt ؛ 2 * r) r = h / 2 ؛
this.beginpath () ؛
this.moveto (x+r ، y) ؛
this.arcto (x+w ، y ، x+w ، y+h ، r) ؛
this.arcto (x+w ، y+h ، x ، y+h ، r) ؛
this.arcto (x ، y+h ، x ، y ، r) ؛
this.arcto (x ، y ، x+w ، y ، r) ؛
// this.arcto (x+r ، y) ؛
this.closepath () ؛
إرجاع هذا ؛
}
معلمات هذه الوظيفة هي الإحداثيات x ، و y الإحداثي ، والعرض ، والارتفاع ، ونصف قطر الزاوية المستديرة. إيلاء اهتمام خاص للمعلمة الأخيرة - نصف قطر الزاوية المدورة.
تستخدم هذه الطريقة Arcto 4 مرات لرسم مستطيل دائري ، والأقواس من كل زاوية هي نفسها. نقطة الإحداثيات لهذا المستطيل المستدير هي أيضًا نفس الزاوية اليسرى العلوية مثل المستطيل ، ولكن نقطة البداية ليست هنا ، ولكن:
يمكنك إزالة أحد الخطوط ومعرفة كيف تكون هذه الطريقة.
بالطبع ، أود أن أذكرك أنه بغض النظر عن الشكل الذي ترسمه ، يجب أن تتذكر إغلاق المسار - Closepath لتجنب ترك المخاطر الخفية.
هذه الطريقة لها إرجاع هذا في النهاية ، مما يتيح لك استخدام بناء جملة السلسلة ، مثل:
CTX.RoundRect (200،300،200،120،20). Stroke () ؛ يمكنك إزالته إذا لم تكن بحاجة إليه.
إذا كنت لا ترغب في توسيع النموذج الأولي ContexTrengEneringContext2D ، فيمكنك أيضًا استخدام هذه الطريقة لإنشاء وظيفة أخرى.
عندما اكتشفت هذه الوظيفة ، لم أكن أعرف حتى ماهية Arcto ، لذلك لم أتذكر أي موقع الويب الذي وجدته عليه. على أي حال ، لم يكن أصلي من قبلي. شكرا للمؤلف.
في المقالة السابقة ، أكدت دائمًا أن كل ركن من أركان المستطيل المستدير المرسوم في هذه الطريقة متسقة لأن الحدود الحدودية في CSS3 يمكن أن ترسم بسهولة مستطيلات مستديرة مع أقواس غير متسقة في كل زاوية أو حتى كل زاوية. سأجد طريقة لرسم مستطيلات مستديرة غير منتظمة في قماش ، لكنني شخصياً أعتقد أن الأمر صعب للغاية.