ปรับภาพให้เข้ากับกรอบองค์ประกอบ

รูปภาพต้องใช้โหมดการปรับขนาดต่างๆ เพื่อให้พอดีกับ "รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์" ที่นี่เราจะดูความสัมพันธ์ระหว่างองค์ประกอบกับภาพและตัวเลือกขนาดพื้นฐาน นอกจากนี้ ฉันจะดูคุณลักษณะที่เป็นประโยชน์เพิ่มเติมบางอย่าง ซึ่งไม่ใช่ทั้งหมดที่ฉันเคยใช้มาก่อน

องค์ประกอบและเนื้อหาภาพ

เมื่อพิจารณาถึง "โมเดลกล่อง" เป็นเรื่องปกติที่จะสับสนระหว่างกล่องบริบทกับเนื้อหาภาพ หากองค์ประกอบยุบลงตามขนาดของเนื้อหาภาพ ขนาดจะไม่มีความแตกต่างกัน อย่างไรก็ตาม หากองค์ประกอบกำลังขยายจนเต็มพื้นที่ ภาพอาจไม่เต็มพื้นที่ที่มีอยู่

ก่อนที่เราจะพูดถึงรูปภาพ เรามาพิจารณาแนวคิดนี้ด้วยองค์ประกอบวงกลมก่อน วงกลมจะเป็นวงกลมเสมอ ไม่ใช่วงรี

องค์ประกอบวงกลมอาจมีขนาดใหญ่กว่าภาพได้ วงกลมจะตั้งศูนย์กลางภายในพื้นที่องค์ประกอบที่มีอยู่ โดยขยายเป็นความกว้างหรือความสูง

องค์ประกอบรูปภาพจะต้องจัดการกับสถานการณ์เดียวกัน: ขนาดองค์ประกอบไม่จำเป็นต้องมีขนาดเท่ากันกับรูปภาพ วิธีที่ถูกต้องในการกำหนดขนาดและตำแหน่งวิชวลจะขึ้นอยู่กับการออกแบบ เราต้องจัดเตรียมคุณสมบัติเพื่อระบุสิ่งที่เกิดขึ้น ใน Fuse ฉันเรียกสิ่งนี้ว่า StretchMode; ใน CSS นี่คือคุณสมบัติ background-size หรือ object-fit

พิกเซลและจุดที่แม่นยำ

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

โหมดการปรับขนาดนี้ใช้บ่อยที่สุดในเลย์เอาต์ซึ่งองค์ประกอบจะมีขนาดเท่ากับรูปภาพ ตัวอย่างเช่น คุณอาจใช้ไอคอนในแถบชื่อเรื่องและปล่อยให้ไอคอนกำหนดขนาดของมัน

เราจำเป็นต้องตอบคำถามว่าเรากำลังพูดถึง "ขนาดธรรมชาติ" อะไร เราสามารถใช้ "พิกเซลหรือจุด" ก็ได้ จำเป็นต้องใช้โหมดการกำหนดขนาดพิกเซลที่แม่นยำเมื่อคุณต้องการให้ภาพมีความคมชัดบนหน้าจอโดยไม่ต้องปรับขนาด โหมดระบุจุดที่แม่นยำจะใช้เมื่อคุณต้องการให้รูปภาพกำหนดขนาดขององค์ประกอบและสอดคล้องกันในอุปกรณ์ต่างๆ

โหมดพิกเซลที่แม่นยำนั้นใช้งานได้ยากบนมือถือ เนื่องจากอุปกรณ์มีความหนาแน่นของพิกเซลต่อจุดที่แตกต่างกันอย่างมาก หากต้องการ จะต้องใช้ร่วมกับภาพที่มีความหนาแน่นหลายภาพ: องค์ประกอบภาพที่ใช้ไฟล์ต้นฉบับที่แตกต่างกัน ขึ้นอยู่กับความหนาแน่นของเป้าหมาย ใน Fuse ฉันได้เพิ่มโหมด PointPrefer เพื่อให้ได้ประโยชน์สูงสุดจากทั้งสองโลก: มันใช้โหมดพิกเซลที่แม่นยำหากขนาดพิกเซลใดขนาดหนึ่งใกล้เคียงกับขนาดพอยต์ มิฉะนั้นจะขยายภาพที่ใกล้เคียงที่สุดไปยังขนาดจุดที่ต้องการ

เติมและปรับขนาด9

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

รูปภาพด้านบนช่วยแสดงความบิดเบี้ยว แต่คุณสมบัติการเติมอาจไม่เหมาะกับรูปภาพดังกล่าว

คุณลักษณะที่เป็นประโยชน์ของการยืดคือการยืดแบบ 9 ตาราง โดยรูปภาพจะแบ่งออกเป็นเก้าส่วนและยืดออกเอง ซึ่งช่วยให้สามารถสร้างเส้นขอบสำหรับองค์ประกอบที่มีขนาดไดนามิกได้ CSS มีคุณลักษณะที่ค่อนข้างแข็งแกร่งด้วย border-image

เครื่องแบบและชุดเครื่องแบบเพื่อเติมเต็ม

หากรูปภาพทั้งหมดต้องพอดีกับองค์ประกอบ และต้องรักษาอัตราส่วนไว้ เราจะใช้โหมด Uniform (เรียกว่า contain ใน CSS) วิธีนี้จะขยายขนาดของรูปภาพเพื่อให้สัมผัสทั้งสองด้านของพื้นที่ที่มีอยู่ โดยปล่อยให้ส่วนที่เหลือขององค์ประกอบว่างเปล่า

หากคุณต้องการเติมองค์ประกอบทั้งหมดและยังคงรักษาอัตราส่วนไว้ เราจะใช้โหมด UniformToFill (เรียกว่า cover ใน CSS) วิธีนี้จะขยายขนาดรูปภาพไปจนถึงขอบทั้งหมดขององค์ประกอบ โดยตัดส่วนเหล่านั้นออกนอกองค์ประกอบ

การจัดตำแหน่งเนื้อหา

นอกเหนือจากโหมด Fill หรือ Scale9 รูปภาพไม่พอดีกับพื้นที่ว่างทั้งหมด สิ่งนี้ทำให้เกิดคำถามว่าจะวางตำแหน่งภาพไว้ที่ใด รูปภาพ Uniform ควรวางอยู่ทางซ้ายหรือทางขวา? รูปภาพ UniformToFill ควรจะแสดงด้านล่างหรือด้านบนของรูปภาพมากกว่า

การเพิ่ม ContentAlignment ให้กับ Image ช่วยให้ผู้ใช้สามารถระบุตัวเลือกนี้ได้ ค่าเริ่มต้นที่ดีคือการสืบทอดการจัดตำแหน่งขององค์ประกอบรูปภาพ หากคุณจัดแนวรูปภาพไปทางขวาล่าง คุณจะคาดหวังว่าภาพจะจัดแนวไปทางขวาล่างด้วย

ทางเลือกหนึ่งที่ฉันไม่เคยนำมาใช้เลยคือการทอดสมอ การจัดตำแหน่งขั้นพื้นฐานไม่ครอบคลุมถึงความแตกต่างของการออกแบบที่ดีพอ จุดยึดช่วยให้เราสามารถเลือกจุดที่น่าสนใจบนภาพถ่ายและให้แน่ใจว่าจุดนั้นอยู่ตรงกลาง เช่น ใบหน้าของรูปโปรไฟล์

การขยายแนวคิดนี้เป็นพื้นที่ยึดเหนี่ยว แทนที่จะเป็นเพียงจุดเดียว เราทำเครื่องหมายสี่เหลี่ยมที่น่าสนใจในภาพต้นฉบับ สิ่งนี้จะเปิดความเป็นไปได้ของโหมด Uniform ที่ช่วยให้แน่ใจว่าพื้นที่ที่สนใจจะแสดงโดยสมบูรณ์ และส่วนที่เหลือของรูปภาพสามารถใช้เพื่อเติมเต็มพื้นที่ว่างได้

ฉันสงสัยว่าบริการส่วนใหญ่ต้องใช้รูปโปรไฟล์สี่เหลี่ยมจัตุรัสเนื่องจากไม่มีจุดยึด ด้วยการยึด คุณสามารถยอมรับภาพถ่ายในขนาดที่กำหนดเองได้ ให้ผู้ใช้ทำเครื่องหมายบริเวณใบหน้า หรือตรวจจับได้ จากนั้นใช้ทั้งภาพในการออกแบบที่ตอบสนอง

ตัวเลือก

สำหรับ Fuse เรายังมีตัวเลือก StretchDirection อีกด้วย อาจเป็น Both (ค่าเริ่มต้น), UpOnly หรือ DownOnly อย่างใดอย่างหนึ่ง รูปภาพจะขยายไปในทิศทางที่อนุญาตเท่านั้น ตัวอย่างเช่น หากเรามี Image {StretchMode=Uniform StretchDirection=DownOnly} ภาพจะย่อลงเพื่อให้พอดีกับองค์ประกอบ แต่จะไม่ขยายเกินขนาดธรรมชาติ ในทางปฏิบัติ มีกรณีการใช้งานที่จำกัดสำหรับสิ่งนี้

แฟล็ก Fill ที่เป็นตัวเลือกเป็นทางเลือกในการกรอกข้อมูลในพื้นที่ว่างขององค์ประกอบ หลังจากวางตำแหน่งองค์ประกอบด้วยโหมดการยืดแล้ว องค์ประกอบจะทำซ้ำเพื่อให้ครอบคลุมพื้นที่ที่เหลือ ซึ่งเหมาะสมที่สุดสำหรับภาพพื้นหลังหรือเมื่อใช้เป็นแปรง

นอกจากการยึดจุดยึดแล้ว คุณสมบัติ Offset ยังช่วยให้สามารถสร้างภาพเคลื่อนไหวแบบง่ายๆ ได้ วางตำแหน่งและปรับขนาดภาพตามปกติ จากนั้นใช้การชดเชยกับตำแหน่งผลลัพธ์ ซึ่งน่าจะรวมกับแฟล็ก Fill บนภาพที่เรียงต่อกัน

องค์ประกอบอื่นๆ

หากคุณกำลังเขียนกลไก UI คุณอาจสนใจที่จะทราบวิธีการคำนวณทั้งหมดนี้ แจ้งให้เราทราบหากคุณต้องการบทความประเภทนี้ — มันค่อนข้างจะเน้นไปทางคณิตศาสตร์ แต่ก็ไม่ซับซ้อน ใน Fuse คุณสามารถค้นหาคลาส SizingContainer ซึ่งสรุปตรรกะส่วนใหญ่ได้ แม้ว่าโค้ดการคำนวณเค้าโครงจะเป็นส่วนหนึ่งของคลาสนั้นก็ตาม

จุดที่น่าสนใจเกี่ยวกับโหมดการปรับขนาดเหล่านี้ก็คือ สามารถนำไปใช้กับองค์ประกอบประเภทใดก็ได้ ไม่ใช่แค่รูปภาพเท่านั้น คุณสมบัติ CSS object-fit ทั่วไปไปในทิศทางนั้น ฉันยังใช้ Viewbox ครั้งหนึ่งซึ่งปรับขนาดองค์ประกอบตามอำเภอใจ ซึ่งรองรับ StretchDirection แต่บังคับโหมดเติม Uniform

แนวคิดนี้เกิดขึ้นซ้ำแล้วซ้ำอีก การรวมการใช้งานที่หลากหลายทั้งหมดไว้ในคุณสมบัติชุดเดียวจะเป็นเป้าหมายที่ดีสำหรับกลไก UI ใหม่ แม้ว่าชุดค่าผสมบางอย่างจะไม่สมเหตุสมผลสำหรับองค์ประกอบบางอย่าง แต่การมีชุดคุณสมบัติร่วมกันจะช่วยลดช่วงการเรียนรู้และทำให้มั่นใจถึงชุดคุณสมบัติที่หลากหลาย

อ่านบทความเพิ่มเติมเกี่ยวกับ การเขียน UI Engine ติดตามฉันบน Twitter และหากต้องการให้ฉันเขียนต่อ โปรดพิจารณา "เป็นผู้อุปถัมภ์"