CapDrive
คู่มือการใช้งาน

Path

สร้างเส้นทางด้วยคำสั่ง เช่น ย้าย เส้น รูปสี่เหลี่ยม ลูกบาศก์ ส่วนโค้ง และปิด เหมาะสำหรับการปรับแต่งพอยน์เตอร์ เส้นโค้ง และโครงร่างแบบรวม และการตั้งค่ากฎการเติมและเส้นขีด

ตัวอย่าง

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

การใช้งาน

  • commands ทำตามลำดับ move เริ่ม line/quad/cubic/arc เพิ่มเส้น close ปิด โดย x/y ของ arc คือศูนย์กลาง evenOdd ทำช่องในรูปซ้อน การกลับจุดเริ่มไม่เท่ากับ close
  • contentAnimation เปลี่ยนข้อความ ภาพ หรือข้อมูลโครงสร้าง interpolate ต้องมีจำนวนจุด/closed ของ Polyline ลำดับ Path หรือโครงสร้างกราฟที่เข้าคู่ หากโครงสร้างเปลี่ยนจะอัปเดตทันที

คุณสมบัติ

commandsReadonlyArray<PathCommand>

คำสั่งเส้นทางภายใน หน่วย pt อาร์เรย์ว่างจะไม่วาด

ตัวอย่าง[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

กฎการเติมเส้นทาง: nonZero หรือ evenOdd

ตัวอย่าง"nonZero"
background?Paint

สีเติมภายในเส้นทาง ค่าเริ่มต้นโปร่งใส

ตัวอย่าง"clear"
stroke?Paint

สีหรือไล่สีเส้นขอบ clear ซ่อนเส้น

ตัวอย่างHDR($env.dark ? "white" : "black")
lineWidth?number

ความหนาเส้นเป็นพอยต์ 0 ไม่วาดเส้น

ตัวอย่าง2
lineCap?"round" | "butt" | "square"

ปลายเส้น butt ตัด square ยื่นสี่เหลี่ยม round มน

ตัวอย่าง"round"
lineJoin?"round" | "miter" | "bevel"

รูปแบบจุดต่อเส้น miter, round หรือ bevel

ตัวอย่าง"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
contentAnimation?ContentAnimation

การเปลี่ยนเนื้อหาแบบเลือกได้ interpolate ต้องมีจำนวนคำสั่งและลำดับการทำงานเหมือนกัน มิฉะนั้นจะอัปเดตทันที

ตัวอย่าง{type: "interpolate", duration: 0.25}
คุณสมบัติทั่วไป
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

View มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; 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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

ภาพเคลื่อนไหว

ภาพเคลื่อนไหว

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

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

คุณสมบัติเมื่อไม่ระบุ
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

ก่อนหน้า

BarChart

ขั้นตอนถัดไป

ในหน้านี้

ตัวอย่างการใช้งานคุณสมบัติตัวอย่างใช้งานภาพเคลื่อนไหวเมื่อไม่ระบุAPI ที่เกี่ยวข้อง