ข้อมูลเบื้องต้นเกี่ยวกับ 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 (VML (Vector Modeling Language)) ในปัจจุบัน ซึ่งรวมถึง Internet Explorer เวอร์ชันก่อนหน้า IE9

การวาดฉากแรกของคุณ

เรามาเริ่มต้นด้วยการวาดฉากง่ายๆ กับ Raphaël เราจะเริ่มวาดฉากโดยสร้างวัตถุ Raphaël ในกรณีนี้ ผมใช้ตัวสร้างที่แทรกเข้าไปในองค์ประกอบ HTML ที่ระบุโดยมีความกว้างและความสูงที่กำหนด แต่คุณสามารถให้ Raphaël เพิ่มออบเจ็กต์ไปยัง DOM (แบบจำลองออบเจ็กต์เอกสาร) ได้ด้วย ต่อไป ผมจะสร้างสี่เหลี่ยมผืนผ้าโดยใส่ความกว้างและความสูง ในตำแหน่ง 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"});

การวาดรูปร่างขั้นสูงพร้อมเส้นทาง

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

รหัสและรูปด้านล่างแสดงรูปสี่เหลี่ยมผืนผ้าและรูปโค้งแบบปิดที่วาดพร้อมด้วยเส้นทาง ตัวอักษร M ตามด้วยพิกัดจะย้ายปากกาไปที่ตำแหน่งนั้น L ตามด้วยคู่พิกัดจะวาดเส้นจากตำแหน่งปัจจุบันไปยังตำแหน่งนั้น โดยจะวาดเส้นโค้งเบซิเยร์แบบเรียบๆ ที่มีจุดควบคุมที่กำหนดและปลายทางที่มีพิกัดสัมพัทธ์ 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 วิธีด้วยกัน วิธีแรกคือ ข้อความ จะใช้พิกัด x และ y กับสตริงเพื่อวาด การใช้ข้อความไม่ได้ช่วยให้คุณควบคุมแบบอักษรหรือเอฟเฟกต์อื่นๆ ได้มากนัก โดยจะวาดในแบบอักษรเริ่มต้นโดยใช้ขนาดเริ่มต้น

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

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 Font Directory

กิจกรรม

องค์ประกอบ SVG สามารถติดตามเหตุการณ์ที่ใช้เมาส์แบบเดิมทั้งหมดได้โดยตรง คลิก, dblclick, เลื่อนเมาส์ลง, ย้ายเมาส์, เลื่อนเมาส์ออก, เข้าเมาส์โอเวอร์, เลื่อนเมาส์ขึ้น และชี้เมาส์ 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

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

การใช้ SVG หรือ Canvas ในการเขียนโปรแกรมเกมนั้นค่อนข้างง่าย นอกจากข้อจำกัดปกติทั่วไปที่คุณจะวางแผนทำให้ใช้งานได้บนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่แล้ว จริงๆ แล้วยังขึ้นอยู่กับจำนวนสไปรท์ด้วย SVG ให้ประโยชน์แก่สิ่งที่ผมเรียกว่าเกม ที่มีความละเอียดต่ำ ผมอธิบายว่าเป็นเกมที่มีการเคลื่อนไหวของวัตถุได้จำกัด พร้อมกัน รวมถึงการลบและการสร้างภาพต่อเรียง เกมกระดานหลายเกม เช่น Chess, Checkers หรือ Battleship รวมถึงเกมไพ่อย่าง BlackJack, Poker และ Hearts จัดอยู่ในหมวดหมู่นี้ ชุดข้อความอีกชุดหนึ่งคือในเกมหลายเกม ผู้เล่นจะต้องย้ายวัตถุที่กำหนดเอง และความสามารถในสคริปต์ของ SVG ทำให้การเลือกวัตถุทำได้ง่ายๆ

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

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

svg-edit

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

อิงค์สเคป

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

ผู้เยาว์

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

รายการอ้างอิง