CapDriveLine
วาดเส้นตรงระหว่างจุดปลายสองจุดในพิกัดท้องถิ่น เหมาะสำหรับเส้นบ่งชี้ เครื่องหมายถูก และตัวแบ่ง คุณสามารถตั้งค่าสี ความกว้าง ขีดกลาง และรูปแบบจุดสิ้นสุดได้
ตัวอย่าง
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 ไม่วาดเส้น
2lineCap?"round" | "butt" | "square"ปลายเส้น butt ตัด square ยื่นสี่เหลี่ยม round มน
"round"dash?number[]ความยาวเส้นและช่องว่างสลับกันเป็นพอยต์ อาร์เรย์ว่างคือเส้นทึบ
[]dashPhase?numberระยะเลื่อนลายเส้นประเป็นพอยต์
0trimStart?numberช่วงเส้นที่แสดง trimStart–trimEnd ใน 0–1; Circle/Ellipse/Arc ใช้มุม
0trimEnd?numberช่วงเส้นที่แสดง trimStart–trimEnd ใน 0–1; Circle/Ellipse/Arc ใช้มุม
1คุณสมบัติทั่วไป
width?number | "auto" | "fill"ความกว้างเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่
"fill"height?number | "auto" | "fill"ความสูงเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่
"fill"x?numberเลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์
0y?numberเลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์
0transform?ViewTransformแปลงทั้ง View โดยไม่เปลี่ยนเลย์เอาต์ ระยะเลื่อนเป็นพอยต์ หมุน/เอียงเป็นองศา สเกล 1 ไม่เปลี่ยน จุดยึด 0–1
{rotation: 0}opacity?numberความทึบทั้ง View: 0 โปร่งใส 1 ทึบ
1clipped?booleanตัดส่วนที่วาดเกินขอบ View
falseclip?"rectangle" | "ellipse"รูปทรงตัด rectangle หรือ ellipse; Material ใช้ false เพื่อปิดได้
"rectangle"mask?View | nullView มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; null ปิดการใช้มาสก์
<Circle width="fill" height="fill" background="white"/>zIndex?numberลำดับวาดระหว่างองค์ประกอบระดับเดียวกัน ค่ายิ่งมากยิ่งอยู่หน้า
0blur?numberรัศมีเบลอเป็นพอยต์ 0 คือปิด
4innerShadow?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 ซ่อนเงา
0shadowRadius?numberรัศมีเบลอเงาภายนอกเป็นพอยต์
4shadowX?numberเลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง
0shadowY?numberเลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง
2animations?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เมื่อไม่ระบุ
ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่
| คุณสมบัติ | เมื่อไม่ระบุ |
|---|---|
lineWidth | 2 |
lineCap | "round" |
trimStart | 0 |
trimEnd | 1 |
dash | [] |
dashPhase | 0 |
stroke | HDR($env.dark ? 'white' : 'black') |