วาดเส้นง่ายๆกับแท็ก Spark Path by Ziah
Feb0
โดยปกติแล้วโปรแกรมเมอร์อย่างๆเรา วาดเส้นต่างๆก็ลำบากแล้วใช่ไหมล่ะครับ
อย่างเช่นถ้าจะให้วาดสามเหลี่ยมเป็นกราฟ ปกติแล้วก็คงจะสร้าง MovieClip มาแล้วใช้ AS3 วาดเส้นเอาโดยใช้ฟังก์ชั่นวาดรูปพื้นฐาน graphics.lineTo แบบนี้
var triangleShape:Shape = new Shape();
triangleShape.graphics.moveTo(0,0);
triangleShape.graphics.lineTo(100,0);
triangleShape.graphics.lineTo(100,100);
triangleShape.graphics.lineTo(0,100);
แต่แล้วใน Flex 4 หลังจากมี Spark แท็กเราก็สามารถวาดเส้นง่ายๆได้แล้วล่ะครับ
โดยวิธีที่จะมาเสนอในวันนี้คือแท็ก <s:Path> ครับ โดยแท็กนี้เราสามารถวาดเส้นต่างๆภายในบรรทัดเดียวได้เลยล่ะครับ!
โดยเจ้า Spark Path นี้มี Attribute ที่สำคัญหลักๆตัวเดียวเลยครับคือ data ที่มีไทป์เป็น String ธรรมดาๆนี่แหละครับ
เราสามารถวาดเส้นได้ดังนี้ครับ
ตัวอย่าง:
<s:Path data=”M 0 0 L 100 0 L 100 100 L 0 100 Z”>
<s:stroke>
<s:SolidColorStroke color=”#333333″ caps=”square” joints=”miter” />
</s:stroke>
<s:fill>
<s:SolidColor color=”#00CCFF” />
</s:fill>
</s:Path>
Stroke จะมีไว้กำหนดลักษณะของเส้น และ fill จะมีไว้กำหนดลักษณะของสีด้านในครับ
ทีนี้พระเอกของเราคือเจ้า data โดยเจ้า data จะเป็นตัวกำหนดรูปร่างของเส้นวาดๆของเราครับ
วิธีใช้ก็เพียงแค่ใส่ตัวหนังสือที่ระบุความสมารถนำหน้าแล้วเคาะเว้นตามด้วยค่าต่างๆครับ
โดยตัวหนังสือจะกำหนดสิ่งต่างๆดังนี้
- M / m
- L / l
- C / c
- Q / q
- H / h
- V / v
- Z / z
ทีนี้เราก็เพียงนำค่าต่างๆมาต่อกันเป็น String โดยมีเว้นวรรคคั่นก็สามารถวาดรูปในบรรทัดเดียวได้แล้วครับ
ถ้าค่าของเราต้องเปลี่ยนจากการคำนวนก็เพียงตั้ง id ให้กับ Path ของเราแล้วเซ็ทค่า data ให้ตรงกับ String ที่ผ่านการคำนวนมาแล้ว
เช่นดังนี้ครับ
graphStat.data = “M “+musicX+” “+musicY+” L “+entertainX+” “+entertainY+” L “+charmX+” “+charmY+” Z”;
เท่านี้เราก็จะได้กราฟสามเหลี่ยมตามค่าที่เราตั้งไว้ได้ครับ