ผมทำงานเกี่ยวกับอินเตอร์เฟซแบบโต้ตอบโดยใช้ SVG และ JavaScript / jQuery และฉันพยายามที่จะตัดสินใจระหว่างราฟาเอลและjQuery SVG ฉันอยากรู้
ฉันไม่ต้องการการสนับสนุน VML / IE ใน Raphael หรือความสามารถในการพล็อตของ jQuery SVG ฉันสนใจหลักในวิธีที่สง่างามที่สุดในการสร้างเคลื่อนไหวและจัดการแต่ละรายการบนผืนผ้าใบ SVG
คำตอบ:
ฉันเพิ่งใช้ทั้ง Raphael และ jQuery SVG - และนี่คือความคิดของฉัน:
ข้อดี:ห้องสมุดเริ่มต้นที่ดีสามารถทำสิ่งต่าง ๆ มากมายกับ SVG ได้อย่างรวดเร็ว เขียนได้ดีและมีเอกสาร ตัวอย่างและการสาธิตมากมาย สถาปัตยกรรมที่ขยายได้มาก ยอดเยี่ยมกับภาพเคลื่อนไหว
ข้อด้อย:เป็นเลเยอร์เหนือมาร์กอัป SVG จริงทำให้ยากที่จะทำสิ่งที่ซับซ้อนมากขึ้นด้วย SVG - เช่นการจัดกลุ่ม (รองรับชุด แต่ไม่ใช่กลุ่ม) ใช้งานไม่ได้ดีกับการแก้ไของค์ประกอบที่มีอยู่แล้ว
ข้อดี:ปลั๊กอิน jquery หากคุณใช้ jQuery อยู่แล้ว เขียนได้ดีและมีเอกสาร ตัวอย่างและตัวอย่างจำนวนมาก รองรับองค์ประกอบ SVG ส่วนใหญ่ช่วยให้เข้าถึงองค์ประกอบได้อย่างง่ายดาย
ข้อด้อย:สถาปัตยกรรมไม่สามารถขยายได้เหมือนกับราฟาเอล บางสิ่งอาจมีการจัดทำเป็นเอกสารที่ดีขึ้น (เช่นกำหนดค่าองค์ประกอบ SVG) ใช้งานไม่ได้ดีกับการแก้ไของค์ประกอบที่มีอยู่แล้ว อาศัยความหมาย SVG สำหรับแอนิเมชั่นซึ่งไม่ค่อยดีนัก
SnapSVG เป็นผู้สืบทอดของ Raphael รองรับเฉพาะในเบราว์เซอร์ที่เปิดใช้งาน SVG และรองรับคุณสมบัติเกือบทั้งหมดของ SVG
หากคุณกำลังทำอะไรที่รวดเร็วและง่ายดายกราฟิลส์เป็นตัวเลือกที่ง่าย หากคุณกำลังจะทำอะไรที่ซับซ้อนกว่านี้ฉันเลือกใช้ jQuery SVG เพราะฉันสามารถจัดการมาร์กอัพจริงได้ง่ายกว่าราฟาเอลอย่างมาก และหากคุณต้องการโซลูชันที่ไม่ใช่ jQuery SnapSVG เป็นตัวเลือกที่ดี
สำหรับคนรุ่นหลังฉันต้องการทราบว่าฉันเลือกราฟาเอลเนื่องจาก API ที่สะอาดและการสนับสนุน IE ที่ "ฟรี" และเพราะการพัฒนาที่ใช้งานอยู่นั้นดูมีแนวโน้ม (เช่นการสนับสนุนกิจกรรมถูกเพิ่มใน 0.7 เช่น) อย่างไรก็ตามฉันจะทิ้งคำถามที่ยังไม่ได้ตอบและฉันยังสนใจที่จะได้ยินเกี่ยวกับประสบการณ์ของผู้อื่นโดยใช้ห้องสมุด Javascript + SVG
ฉันเป็นแฟนตัวยงของราฟาเอลและแรงผลักดันในการพัฒนาดูเหมือนจะแข็งแกร่ง (เวอร์ชั่น 0.85 ออกวางจำหน่ายเมื่อปลายสัปดาห์ที่แล้ว) อีกบวกใหญ่คือการที่นักพัฒนาของDmitry Baranovskiyในปัจจุบันคือการทำงานในการสร้างแผนภูมิราฟาเอลปลั๊กอินg.raphaelซึ่งมีลักษณะเหมือนการสร้างมันขึ้นมาเป็นเนียนสวย (มีเพียงบางตัวอย่างของการส่งออกจากรุ่นแรกบนFlickr ) .
อย่างไรก็ตามเพื่อโยนคู่แข่งที่เป็นไปได้ลงในมิกซ์ไลบรารีSVG เว็บ SVGของ Google ดูมีความเป็นไปได้อย่างแน่นอน (แม้ว่าฉันไม่ใช่แฟนตัวยงของ Flash ซึ่งใช้เพื่อแสดงผลในเบราว์เซอร์ที่ไม่สอดคล้องกับ SVG) อาจเป็นหนึ่งในการรับชมโดยเฉพาะอย่างยิ่งกับการประชุม SVG Open ที่กำลังจะจัดขึ้น
ราฟาเอลติดตั้งและเดินทางได้ง่ายขึ้นแน่นอน แต่โปรดทราบว่ามีวิธีการแสดงสิ่งต่าง ๆ ใน SVG ที่ไม่สามารถทำได้ในราฟาเอล ตามที่ระบุไว้ข้างต้นไม่มี "กลุ่ม" นี่ก็หมายความว่าคุณไม่สามารถใช้เลเยอร์การแปลงพิกัดด้วยกันได้ แต่จะมีการแปลงพิกัดเพียงชุดเดียวเท่านั้น
หากการออกแบบของคุณขึ้นอยู่กับการแปลงพิกัดที่ซ้อนกัน Raphael ไม่เหมาะสำหรับคุณ
โอ้ราฟาเอลก้าวต่อไปอย่างมีนัยสำคัญตั้งแต่เดือนมิถุนายน มีห้องสมุดการสร้างแผนภูมิใหม่ที่สามารถทำงานกับมันและสิ่งเหล่านี้เป็นที่สะดุดตามาก ราฟาเอลยังรองรับไวยากรณ์เส้นทาง SVG เต็มรูปแบบและได้รวมวิธีการเส้นทางขั้นสูงจริงๆ มาดูที่ 1.2.8+ ที่เว็บไซต์ของฉัน (ปลั๊กไร้ยางอาย) จากนั้นก็เด้งไปที่ไซต์ของ Dmitry จากตรงนั้น http://www.irunmywebsite.com/raphael/raphaelsource.html
ฉันคิดว่ามันไม่ได้ไม่เกี่ยวข้องกันโดยสิ้นเชิง แต่คุณคิดว่าผ้าใบหรือไม่ บางอย่างเช่นProcess JSสามารถทำให้ง่ายขึ้น
คุณควรดูที่ svgweb ด้วย มันใช้แฟลชเพื่อแสดงผล svg ใน IE และเป็นทางเลือกในเบราว์เซอร์อื่น ๆ (ในกรณีที่รองรับมากกว่าที่เบราว์เซอร์เองทำ)
ฉันจะทิ้งการลงคะแนนของฉันไว้ที่ Raphael - การสนับสนุนข้ามเบราว์เซอร์, ล้าง API และอัปเดตที่สอดคล้องกัน มันเล่นได้ดีมากกับ jQuery ด้วย การประมวลผลนั้นยอดเยี่ยม แต่มีประโยชน์มากกว่าสำหรับการสาธิตสิ่งต่าง ๆ
ในฐานะที่เป็นผู้เริ่มต้น Javascript ฉันพบตัวอย่าง Rapahel ไม่ใช่เรื่องง่ายฉันขอแนะนำ http://cancerbero.mbarreneche.com/raphaeltutซึ่งเป็นแบบฝึกหัดทีละขั้นตอนจริง
สำหรับผู้ที่ไม่สนใจเกี่ยวกับ IE6 / IE7 คนเดียวที่เขียน Raphael สร้างเครื่องมือ svg สำหรับเบราว์เซอร์สมัยใหม่โดยเฉพาะ: Snap.svg .. พวกเขามีเว็บไซต์ที่ดีมากที่มีเอกสารที่ดี: http://snapsvg.io
snap.svg ไม่สามารถใช้งานได้ง่ายนอกกรอบและสามารถจัดการ / อัปเดต SVG ที่มีอยู่หรือสร้างใหม่ คุณสามารถอ่านสิ่งนี้ได้ใน snap.io เกี่ยวกับหน้า แต่นี่คือการเรียกใช้อย่างรวดเร็ว:
จุดด้อย
ข้อดี
ใช้คุณสมบัติเต็มรูปแบบของ SVG เช่นการปิดบังการตัดรูปแบบการไล่ระดับสีแบบเต็มกลุ่มและอื่น ๆ
ความสามารถในการทำงานกับ SVG ที่มีอยู่: ไม่จำเป็นต้องสร้างเนื้อหาด้วย Snap เพื่อให้ทำงานกับ Snap ได้ช่วยให้คุณสร้างเนื้อหาด้วยเครื่องมือออกแบบทั่วไป
รองรับการเคลื่อนไหวโดยใช้ JavaScript API ที่ใช้งานง่ายตรงไปตรงมา
ทำงานร่วมกับสตริงของ SVG (ตัวอย่างเช่นไฟล์ SVG ที่โหลดผ่าน Ajax) โดยไม่ต้องสร้างมันขึ้นมาก่อนคล้ายกับคอนเทนเนอร์ของทรัพยากรหรือแผ่นงานสไปรต์
ตรวจสอบว่าคุณสนใจ: http://snapsvg.io
เนื่องจากยังไม่ได้กล่าวถึงที่นี่: คุณควรดูDojox.drawingซึ่งให้ความสามารถในการวาด SVG ที่ดี มันมีคุณสมบัติที่น่าประทับใจ ฉันเพิ่งเริ่มต้นโครงการด้วย แต่สำหรับฉันแล้วมันยอดเยี่ยมมาก (อย่างน้อยก็ในแง่ของฟีเจอร์) กับราฟาเอลและ JQuerySVG
งานนำเสนอนี้ทำให้ฉันเชื่อว่าจะใช้มันแทน Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
การอ้างอิง: http://dojotoolkit.org/reference-guide/dojox/index.html
การอ้างอิงเกี่ยวกับ Dojocampus: http://docs.dojocampus.org/dojox/drawing
ดาวน์โหลด Dojo (รวมถึง Dojox): http://dojotoolkit.org/download/
อีกหนึ่ง svg javascript library ที่คุณอาจต้องการดูคือ d3.js. http://d3js.org/
ฉันชอบที่จะใช้ RaphaelJS เพราะมันมีความสามารถข้ามเบราว์เซอร์ที่ยอดเยี่ยม อย่างไรก็ตามเอฟเฟกต์ SVG และ VML บางอย่างไม่สามารถทำได้ด้วย RaphaelJS (การไล่ระดับสีที่ซับซ้อน ... )
Google ได้พัฒนาห้องสมุดของตัวเองเพื่อเปิดใช้งานการสนับสนุน SVG ใน IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
หากคุณไม่ต้องการการสนับสนุน VML และ IE8 ให้ใช้ Canvas (PaperJS เป็นต้น) ดูการสาธิต IE10 ล่าสุดสำหรับ Windows 7 พวกเขามีภาพเคลื่อนไหวที่น่าทึ่งใน Canvas SVG ไม่สามารถทำอะไรได้ใกล้กับพวกเขา Canvas โดยรวมมีอยู่ในเบราว์เซอร์มือถือทั้งหมด SVG ไม่ทำงานบน Android 2.0- 2.3 รุ่นแรก (เท่าที่ฉันรู้)
ใช่ Canvas ไม่สามารถปรับขนาดได้ แต่มันเร็วมากที่คุณสามารถวาดทั้งผืนผ้าใบได้เร็วขึ้นจากนั้นเบราว์เซอร์ที่สามารถเลื่อนดูพอร์ตได้
จากมุมมองของฉันการปรับให้เหมาะสมของ Microsoft นั้นหมายถึงการใช้ Canvas เป็นเอนจิ้น GDI ปกติและติดตั้งแอปพลิเคชั่นกราฟิกอย่างที่เราทำเพื่อ Windows