ฉันจะสร้าง tesselation หกเหลี่ยมแบบเรียงต่อกัน (สำหรับ SVG / Web) ได้อย่างไร


11

ฉันต้องการสร้างภาพพื้นหลัง SVGสำหรับหน้าเว็บโดยใช้รูปหกเหลี่ยมปกติในรูปแบบ tessellation คล้ายกับภาพด้านล่าง อย่างไรก็ตามฉันต้องการรูปหกเหลี่ยมเพื่อเชื่อมต่อระหว่างกันเพื่อให้ฉันสามารถใช้:

background-image: url("path-to-hex.svg");

รูปแบบ CSS ฉันต้องการทำสิ่งนี้ใน Inkscape ฉันไม่แน่ใจว่าจะ "ตัด" ลวดลายเป็นบล็อกได้อย่างไร ฉันจะเริ่มต้นทำสิ่งนี้ได้อย่างไร

รูปหกเหลี่ยม

แก้ไข ผลออกมาดูดีจริงๆ! เอาท์พุต


จะมีประโยชน์หากคุณสามารถวางลิงค์ไปยังไฟล์ inkscape!
V-Red

คำตอบ:


21

ด้วยเล่ห์เหลี่ยมการใช้งานบูลีนนี่เป็นกระบวนการที่ค่อนข้างง่าย

ป้อนคำอธิบายรูปภาพที่นี่

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

แก้ไข:ตามความเห็นของ horatio (โทรดี!) ฉันคิดว่าฉันควรจะอธิบายวิธีที่ฉันตัดสินในสี่เหลี่ยมผืนผ้านั้น เมื่อสร้างไทล์คุณต้องให้แต่ละส่วนของแพทเทิร์นของคุณปรากฏอย่างน้อยหนึ่งครั้งในไทล์ดังกล่าว (และไม่ควรเกินหนึ่งครั้ง) ด้วยรูปแบบนี้ฉันดูว่ามีจุดเกิดซ้ำบนแกน x หรือ y หรือไม่ โชคดีสำหรับฉันรูปหกเหลี่ยมไม่ได้นั่งอยู่ในมุมที่แปลกดังนั้นสิ่งนี้ทำให้งานค่อนข้างง่าย

ป้อนคำอธิบายรูปภาพที่นี่

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

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


2
หากคุณสามารถอธิบายแนวคิดเบื้องหลังวิธีที่คุณเลือกพื้นที่สี่เหลี่ยมผืนผ้า OP อาจสามารถสรุปสิ่งนี้กับรูปร่างอื่น ๆ ได้
horatio

การอัพเดทดีมาก ช่วยอธิบายแนวคิด
Diode Dan

ยอดเยี่ยม ดีใจที่ฉันสามารถช่วย :)
Chris Langford
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.