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

Ellipse

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

مثال

function main() {
  return (
    <Ellipse
      width={180}
      height={100}
      background="clear"
      stroke={$env.accent}
      lineWidth={6}
      startAngle={0}
      sweepAngle={270}
      strokePosition="center"
    />
  );
}

الاستخدام

  • Ellipse وArc يستخدمان العرض والارتفاع كاملين؛ تساويهما يعطي دائرة. القوس الجزئي مفتوح ولا يتصل بالمركز. background يملأ دورة كاملة مغلقة فقط.
  • الزاوية بالدرجات: 0 يمينًا، 90 للأسفل، sweep الموجب مع الساعة. startAngle بترديد 360 وsweepAngle بين −360…360. صفر لا يرسم و±360 دورة. wrap:360 لـ startAngle فقط.
  • background/stroke يقبلان Color أو Gradient. استخدم دوال Gradient الثلاث: المواقع والمراكز 0–1، وأنصاف الأقطار بالنقاط. HDR يغلف لونًا واحدًا وسطوعه يعتمد على الجهاز والعرض.

الخصائص

startAngle?number

زاوية البداية بالدرجات، تُطبّع بترديد 360 عند أخذ العينات.

مثال0
sweepAngle?number

زاوية المسح بالدرجات، تُحصر بين -360…360 عند أخذ العينات. القيم الموجبة مع عقارب الساعة؛ wrap غير مدعوم.

مثال360
background?Paint

تعبئة دائرة أو قطع ناقص كامل ومغلق. تُتجاهل للأقواس الجزئية.

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

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

مثال"clear"
lineWidth?number

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

مثال2
strokePosition?"inside" | "center" | "outside"

موضع الحد بالنسبة إلى محيط الدائرة أو القطع الناقص الكامل. الافتراضي inside.

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

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

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

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

مثال[]
dashPhase?number

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

مثال0
الخصائص المشتركة
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?EllipseAnimation[]

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

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

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

مثال عملي

function main() {
  return (
    <VStack spacing={12}>
      <Ellipse width={180} height={80} background={$env.accent} />
      <Ellipse
        width={180}
        height={80}
        background="clear"
        stroke={$env.accent}
        lineWidth={6}
        startAngle={180}
        sweepAngle={180}
      />
    </VStack>
  );
}

الحركة

الحركة

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

عند الإغفال

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

الخصائصعند الإغفال
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Circle

Arc

Color / Gradient

Circle

السابق

Rectangle

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

في هذه الصفحة

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