تجاوز إلى المحتوى الرئيسي
مِرقم
ابدأ مجانًا
في هذه الصفحة

المخطط (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"

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

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

الخاصية
النوع
الوصف
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".

مثال:

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