المخطط (Schema)

يُعرِّف المخطط الحقول فوق صورة القالب.

نظرة عامة:

json
{
  "canvas": { "width": 1200, "height": 800 },
  "fields": [
    {
      "type": "image",
      "key": "avatar",
      "box": { "x": 40, "y": 40, "w": 160, "h": 160 },
      "shape": "circle",
      "fit": "cover"
    },
    {
      "type": "text",
      "key": "title",
      "box": { "x": 40, "y": 230, "w": 730, "h": 160 },
      "font": { "font_id": "<FONT_ID>", "size": 56, "min_size": 24 }
    }
  ]
}

canvas

canvas اختياري لكن مُوصى به. يجب أن يطابق أبعاد صورة القالب بالضبط.

width
number
عرض الكانفاس بالبكسل. يجب أن يطابق عرض صورة القالب.
height
number
ارتفاع الكانفاس بالبكسل. يجب أن يطابق ارتفاع صورة القالب.

fields[]

الحقول نوعان:

  • حقل نص: type: "text"
  • حقل صورة: type: "image"
Note

للتوافق مع الإصدارات السابقة، يمكن حذف type من حقول النص. تُعامِل الخدمة الحقول بدون type على أنها "text".

الخصائص المشتركة

كل حقل يحتوي على:

key
string
يُستخدم في payload الرندر لتمرير البيانات لهذا الحقل.
box
object
مستطيل الحقل على الصورة: { x, y, w, h } بالبكسل من أعلى اليسار.
json
{
  "key": "title",
  "box": { "x": 40, "y": 90, "w": 730, "h": 230 }
}

الإحداثيات بالبكسل من الزاوية العليا اليسرى.

حقول النص (type: "text")

font.font_id
string
مطلوب. معرّف الخط المُرفوع المستخدم في الرندر.
font.size
number
حجم الخط بالبكسل.
font.min_size
number
أصغر حجم للخط عند تفعيل التصغير التلقائي.
direction
string
اتجاه النص: "rtl" أو "ltr".
align
string
المحاذاة الأفقية: "right" أو "center" أو "left".
valign
string
المحاذاة الرأسية: "top" أو "middle" أو "bottom".
fitting
string[]
قائمة مرتبة لاستراتيجيات التلاؤم: "wrap" و "shrink" و "ellipsis".

مثال كامل:

json
{
  "type": "text",
  "key": "title",
  "box": { "x": 40, "y": 90, "w": 730, "h": 230 },
  "font": { "font_id": "<FONT_ID>", "size": 56, "min_size": 24 },
  "direction": "rtl",
  "align": "right",
  "valign": "middle",
  "fitting": ["wrap", "shrink", "ellipsis"]
}

حقول الصور (type: "image")

حقول الصور عناصر محجوزة تُملأ وقت الرندر عبر images في الـ payload.

shape
string
قناع الشكل: "square" أو "circle".
fit
string
كيف تملأ الصورة المستطيل: "cover" أو "contain".
Note

يجب أن يكون box مربعًا (w == h) عند استخدام square أو circle.

مثال:

json
{
  "type": "image",
  "key": "avatar",
  "box": { "x": 40, "y": 40, "w": 160, "h": 160 },
  "shape": "circle",
  "fit": "cover"
}
المخطط | Mirqam Docs