CapDrive
دليل الاستخدام

Line

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

مثال

function main() {
  return (
    <Line
      start={{ x: 0, y: 20 }}
      end={{ x: 160, y: 60 }}
      stroke={$env.accent}
      lineWidth={4}
      lineCap="round"
    />
  );
}

الاستخدام

  • start/end إحداثيات محلية من أعلى اليسار، x يمينًا وy للأسفل. لا تتغير نسبيًا مع width/height؛ احسبها للأحجام المتجاوبة. Line ليس له داخل قابل للملء.
  • تُطبّق x/y وtransform بعد التخطيط. تحريك عنصر لا يدفع إخوته؛ استخدم spacing أو Spacer للفواصل. الدوران والتحجيم يؤثران في الرسم كاملًا.

الخصائص

start?ViewPoint

نقطة النهاية بإحداثيات محلية بالنقاط؛ x يميناً وy لأسفل.

مثال{x: 0, y: 0}
end?ViewPoint

نقطة النهاية بإحداثيات محلية بالنقاط؛ x يميناً وy لأسفل.

مثال{x: 100, y: 80}
stroke?Paint

لون أو تدرج للخط؛ clear يخفيه.

مثالHDR($env.dark ? "white" : "black")
lineWidth?number

سماكة الخط بالنقاط؛ 0 لا يرسم خطاً.

مثال2
lineCap?"round" | "butt" | "square"

نهاية الخط: butt يقطع، square يمدد بشكل مربع، round يدوّر.

مثال"round"
dash?number[]

أطوال متناوبة للرسم والفراغ بالنقاط؛ المصفوفة الفارغة خط متصل.

مثال[]
dashPhase?number

إزاحة نمط الشرطات بالنقاط.

مثال0
trimStart?number

جزء المسار المرئي بين trimStart وtrimEnd ضمن 0–1. تستخدم Circle/Ellipse/Arc الزوايا.

مثال0
trimEnd?number

جزء المسار المرئي بين trimStart وtrimEnd ضمن 0–1. تستخدم Circle/Ellipse/Arc الزوايا.

مثال1
الخصائص المشتركة
width?number | "auto" | "fill"

العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"
height?number | "auto" | "fill"

الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"
x?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
y?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
transform?ViewTransform

تحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.

مثال{rotation: 0}
opacity?number

عتامة View بالكامل: 0 شفاف و1 معتم.

مثال1
clipped?boolean

قص الرسم الذي يتجاوز حدود View.

مثالfalse
clip?"rectangle" | "ellipse"

شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.

مثال"rectangle"
mask?View | null

عرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.

مثال<Circle width="fill" height="fill" background="white"/>
zIndex?number

ترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.

مثال0
blur?number

نصف قطر التمويه بالنقاط؛ 0 يعطّله.

مثال4
innerShadow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

لون الظل الخارجي.

مثالHDR("black")
shadowOpacity?number

عتامة الظل من 0 إلى 1؛ 0 يخفيه.

مثال0
shadowRadius?number

نصف قطر تمويه الظل الخارجي بالنقاط.

مثال4
shadowX?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال0
shadowY?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال2
animations?Animation[]

تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

معرّف ثابت بين العناصر الشقيقة.

مثال عملي

function main() {
  return (
    <Line
      width={$env.width}
      height={40}
      start={{ x: 0, y: 20 }}
      end={{ x: $env.width, y: 20 }}
      stroke={$env.accent}
      lineWidth={3}
      dash={[8, 4]}
      dashPhase={0}
    />
  );
}

الحركة

الحركة

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.y

عند الإغفال

الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.

الخصائصعند الإغفال
lineWidth2
lineCap"round"
trimStart0
trimEnd1
dash[]
dashPhase0
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Path

Color / Gradient

Rectangle

السابق

Arc

الخطوة التالية

في هذه الصفحة

مثالالاستخدامالخصائصمثال عمليالحركةعند الإغفالواجهات مرتبطة