ข้อมูลเบื้องต้นเกี่ยวกับ Raphaël.js

James Williams

บทนำ

SVG ย่อมาจาก Scalable Vector Graphics เป็นภาษา XML สำหรับอธิบายวัตถุและฉาก องค์ประกอบ SVG สามารถเรียกเหตุการณ์ให้แสดงและเขียนสคริปต์ด้วย JavaScript ได้ SVG มาพร้อมกับประเภทพื้นฐานในตัวหลายประเภท เช่น วงกลมและสี่เหลี่ยมผืนผ้า รวมถึงสามารถแสดงข้อความได้ แม้ว่า SVG จะเป็นเทคโนโลยีที่ไม่ใช่เรื่องใหม่ แต่ตอนนี้ HTML5 ช่วยให้ฝังออบเจ็กต์ SVG ในหน้าเว็บได้โดยตรงโดยไม่ต้องใช้แท็ก <object> หรือ <embed> ซึ่งทำให้สอดคล้องกับสิ่งที่พร้อมใช้งานใน Canvas ในปัจจุบัน Raphaël.js เป็นไลบรารี JavaScript ที่ช่วยให้คุณสร้างฉาก SVG แบบเป็นโปรแกรมได้ โดยใช้ API แบบรวมเพื่อสร้างฉาก SVG ในระบบที่รองรับ หรือ VML(Vector Modeling Language) ในระบบปัจจุบัน ซึ่งก็คือ Internet Explorer เวอร์ชันก่อน IE9

การวาดฉากแรก

มาเริ่มวาดฉากง่ายๆ ด้วย Raphaël กัน เราเริ่มวาดฉากโดยการสร้างอินสแตนซ์ของออบเจ็กต์ Raphaël ในกรณีนี้ เราใช้คอนสตรัคเตอร์ที่แทรกลงในองค์ประกอบ HTML หนึ่งๆ ที่มีความกว้างและความสูงที่ระบุ แต่คุณยังทำให้ Raphaël ต่อท้ายออบเจ็กต์ไปยัง DOM (Document Object Model) ได้ด้วย ถัดไป เราสร้างสี่เหลี่ยมผืนผ้าโดยระบุตําแหน่ง x และ y ที่ต้องการพร้อมความกว้างและความสูง ถัดไป ฉันสร้างวงกลมโดยระบุพิกัดและรัศมีที่ต้องการ สุดท้าย เราใช้ฟังก์ชันแอตทริบิวต์ (attr) เพื่อกำหนดสีให้กับวัตถุ

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

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

การวาดรูปทรงขั้นสูงด้วยเส้นทาง

เส้นทางคือชุดคำสั่งที่โปรแกรมแสดงผลใช้ในการสร้างออบเจ็กต์ การวาดด้วยเส้นทางจะเหมือนกับการวาดด้วยปากกาบนกระดาษกราฟขนาดใหญ่ คุณสามารถสั่งให้ยกปากกาขึ้นจากกระดาษแล้วย้ายไปยังตำแหน่งอื่น(move to) เพื่อวาดเส้น(line to) หรือวาดเส้นโค้ง(arc to) เส้นทางช่วยให้ SVG สร้างออบเจ็กต์ที่มีรายละเอียดในระดับเดียวกันได้ไม่ว่าจะปรับขนาดอย่างไร เมื่อคุณออกคำสั่งให้วาดเส้นโค้ง SVG จะพิจารณาขนาดเดิมและขนาดที่ต้องการสุดท้ายของเส้นโค้ง (หลังจากการปรับขนาด) จากนั้นจะคำนวณจุดสื่อกลางทางคณิตศาสตร์เพื่อแสดงผลเส้นโค้งที่ราบรื่น

โค้ดและรูปภาพด้านล่างแสดงสี่เหลี่ยมผืนผ้าและเส้นโค้งปิดที่วาดด้วยเส้นทาง อักษร M ตามด้วยพิกัดจะย้ายปากกาไปยังตำแหน่งนั้น อักษร L ตามด้วยคู่พิกัดจะวาดเส้นจากตำแหน่งปัจจุบันไปยังตำแหน่งนั้น อักษร S จะวาดเส้นโค้ง Bezier ที่ราบรื่นด้วยจุดควบคุมและปลายทางที่ระบุด้วยพิกัดสัมพัทธ์ Z จะปิดเส้นทาง โดยทั่วไปแล้ว การใช้ตัวอักษรพิมพ์ใหญ่จะออกคำสั่งด้วยพิกัดสัมบูรณ์ ส่วนตัวอักษรพิมพ์เล็กจะใช้พิกัดสัมพัทธ์ M/m และ Z/z จะออกคำสั่งเดียวกันสำหรับตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กตามลำดับ คุณดูรายการวิธีการทั้งหมดสำหรับเส้นทางได้ที่นี่

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

การวาดข้อความ

การมีภาพประกอบที่วาดข้อความไม่ได้คงน่าเบื่อมาก แต่โชคดีที่ Raphaël มีวิธีการวาดข้อความ 2 วิธี เมธอดแรกคือ text จะรับพิกัด x และ y พร้อมกับสตริงที่จะวาด วิธีการแบบข้อความให้คุณควบคุมแบบอักษรหรือเอฟเฟกต์อื่นๆ ได้น้อย โดยจะวาดด้วยแบบอักษรเริ่มต้นที่มีขนาดเริ่มต้น

วิธีที่สองคือ print ซึ่งจะวาดข้อความเป็นคอลเล็กชันของเส้นทาง ด้วยเหตุนี้ เราจึงแก้ไขตัวอักษรแต่ละตัวได้ ในตัวอย่างด้านล่าง เราได้ระบายสีตัวเลข 5 ด้วยสีส้มและระบายสี "ROCKS" ด้วยสีฟ้า และทำให้เส้นโครงร่างหนาขึ้นเพื่อจำลองข้อความตัวหนา เราทําเช่นนี้โดยใช้แบบอักษรที่กําหนดเองขนาด 40pt

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

แบบอักษร Vegur ไม่ได้อยู่ใน Raphaël และไม่มีแบบอักษรใดๆ อยู่ในนั้น และนอกจากนี้ แบบอักษรส่วนใหญ่ใช้รูปแบบ TrueType(TTF) หรือ OpenType(OTF) หากต้องการเปลี่ยนรูปแบบเหล่านั้นให้ Raphaël ใช้งานได้ เราจะต้องแปลงโดยใช้เครื่องมือที่เรียกว่า Cufon Cufon ช่วยให้คุณส่งออกแบบอักษรรูปแบบต่างๆ ของแบบอักษรหนึ่งๆ (ปกติ ตัวหนา ตัวเอียง ตัวหนาเอียง ฯลฯ) เพื่อใช้กับ Raphaël ได้ บทแนะนํานี้ไม่ได้กล่าวถึง Cufon โดยละเอียด ดูรายละเอียดเพิ่มเติมได้ที่ลิงก์ที่กล่าวถึงข้างต้น แหล่งที่มาที่ยอดเยี่ยมของแบบอักษรที่ไม่มีข้อจำกัดสำหรับแอปพลิเคชันของคุณคือไดเรกทอรีแบบอักษรของ Google

กิจกรรม

องค์ประกอบ SVG สามารถสมัครรับเหตุการณ์แบบดั้งเดิมทั้งหมดที่อิงตามเมาส์ได้โดยตรง ซึ่งได้แก่ click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup และ hover Raphaël ให้คุณเพิ่มเมธอดของคุณเองลงใน Canvas หรือองค์ประกอบแต่ละรายการได้ ดังนั้นในทางทฤษฎีแล้ว ไม่มีอะไรที่จะป้องกันไม่ให้คุณเพิ่มท่าทางสัมผัสสำหรับเบราว์เซอร์บนอุปกรณ์เคลื่อนที่

ข้อมูลโค้ดด้านล่างจะเชื่อมโยงฟังก์ชันเพื่อหมุนตัวอักษรที่กำหนดใน "ROCKS" 45 องศาเมื่อมีการคลิก

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG กับ Canvas

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

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

เครื่องมือสำหรับสร้าง SVG

การใช้ SVG ไม่ได้หมายความว่าคุณต้องสร้างเส้นทางด้วยตนเอง มีเครื่องมือหลายอย่างทั้งแบบโอเพนซอร์สและแบบพาณิชย์ที่ให้คุณส่งออกเป็น SVG ได้ เครื่องมือ 2 รายการที่เราใช้อย่างแพร่หลายและขอแนะนำอย่างยิ่งคือ Inkscape และ svg-edit

svg-edit

svg-edit เป็นเครื่องมือแก้ไข SVG ที่ใช้เบราว์เซอร์ซึ่งเขียนด้วย JavaScript โดยจะมีอินเทอร์เฟซผู้ใช้แบบจำกัดซึ่งชวนให้นึกถึง GIMP หรือ MS Paint โดยทั่วไปแล้ว เราใช้ svg-edit เพื่อปรับแต่งภาพวาด SVG มากกว่าสร้างภาพวาด เว้นแต่ว่าภาพวาดจะมีรายละเอียดค่อนข้างต่ำ svg-edit ช่วยให้คุณสร้างออบเจ็กต์แบบกราฟิกหรือด้วยโค้ด SVG ได้

Inkscape

Inkscape เป็นโปรแกรมแก้ไขกราฟิกเวกเตอร์แบบข้ามแพลตฟอร์มที่สมบูรณ์แบบซึ่งคล้ายกับ CorelDraw, Adobe Illustrator และ Xara Inkscape ใช้ประโยชน์จากชุมชนปลั๊กอินที่มีชีวิตชีวาและฐานโค้ดที่สมบูรณ์ โปรแกรมรุ่นก่อนหน้าของ Inkscape ซึ่งเป็นโปรแกรมที่ Inkscape แยกออกมาพัฒนาต่อนั้นพัฒนาขึ้นในปี 1999 Inkscape เป็นแอปพลิเคชันหลักสำหรับชิ้นงานแบบเวกเตอร์และบิตแมป

ข้อมูลเสริมเล็กน้อย

Windows ใน Internet Explorer เวอร์ชันก่อน IE9 ไม่รองรับ SVG IE ใช้รูปแบบกราฟิกเวกเตอร์ที่เรียกว่า VML หรือภาษามาร์กอัปเวกเตอร์ ซึ่งให้ฟังก์ชันการทำงานส่วนใหญ่เหมือนกับ SVG Raphaëlสร้างขึ้นได้หากรองรับฉากที่ใช้ SVG หรือ VML การใช้ Raphaël เป็นวิธีที่ง่ายในการให้การสนับสนุนข้ามแพลตฟอร์ม

ข้อมูลอ้างอิง