FlexCanvasJS
v1.3.2
สร้างแอพพลิเคชั่นอินเทอร์เน็ตที่สมบูรณ์ได้อย่างง่ายดายโดยใช้ผืนผ้าใบ HTML5
FlexCanvasjs ให้องค์ประกอบการแสดงผลการแสดงผลแบบอินเทอร์แอคทีฟของผู้ใช้ที่ปรับแต่งได้สูงรายการแสดงผลการแสดงผลแบบลำดับชั้นพาเรนต์ / เด็กเหตุการณ์ UI การจัดแต่งทรงผมและการสกิน, เลย์เอาต์สัมพัทธ์และแบบไดนามิก, พื้นที่วาดใหม่โดยอัตโนมัติและรวมถึงการควบคุม UI
กิจกรรม UI ทั่วไปส่วนใหญ่รวมถึงการจับภาพและเฟสเดือดรวมถึง แต่ไม่ จำกัด เฉพาะเมาส์คีย์บอร์ดโฟกัสโรลโอเวอร์ ฯลฯ ...
เลย์เอาต์ที่ปรับขนาดได้ที่ซับซ้อนสามารถทำได้อย่างง่ายดายโดยองค์ประกอบของภาชนะบรรจุ คอนเทนเนอร์ที่ขับเคลื่อนด้วยข้อมูลเช่น Datalist และ DataGrid อนุญาตให้แสดงชุดข้อมูลที่มีขนาดใหญ่มากในขณะที่แสดงผลสิ่งที่มองเห็นได้บนหน้าจอเพื่อรักษาประสิทธิภาพที่ยอดเยี่ยมและจะผูกมัดและอัปเดตโดยอัตโนมัติเมื่อการเปลี่ยนแปลงการรวบรวมข้อมูลที่เกี่ยวข้อง
ระบบสไตล์และสกินที่แข็งแกร่งนั้นช่วยให้คุณสามารถปรับเปลี่ยนและปรับแต่งลักษณะและพฤติกรรมของการควบคุม UI ได้อย่างง่ายดาย
FlexCanvasjs ยกระดับหนักให้คุณ การแคช, ภูมิภาคใหม่, เลเยอร์คอมโพสิตและเอฟเฟกต์ล้วนเป็นไปโดยอัตโนมัติเพื่อประสิทธิภาพที่ดีแม้ในแอพพลิเคชั่นและเกมที่ซับซ้อนมากที่สุด
สิ่งที่คุณต้องมีคือห้องสมุด FlexCanvasjs ขนาดเล็กและผืนผ้าใบ HTML ดาวน์โหลดไลบรารี Minified จากรุ่นล่าสุด
ตัวอย่างด้านล่างใช้ผืนผ้าใบเต็มหน้าจอแม้ว่าผืนผ้าใบใด ๆ จะใช้งานได้
<!DOCTYPE html >
< html >
< head >
< meta charset = utf-8 >
< title > FlexCanvasJS Web Application </ title >
< style >
html, body, canvas { width: 100%; height: 100%; margin: 0; overflow: hidden; }
</ style >
< script src =" FlexCanvasJS_min.js " type =" text/javascript " > </ script >
</ head >
< body >
<!-- Full screen canvas -->
< canvas id =" flexCanvasApplication " > </ canvas >
</ body >
</ html >ตอนนี้แนบ Dom Canvas เข้ากับ FlexCanvasjs CanvasManager และสร้างและจัดสไตล์องค์ประกอบของเรา:
//Create elements
var canvasManager = new CanvasManager ( ) ;
var colorPicker = new ColorPickerElement ( ) ;
function init ( )
{
//Attach the DOM canvas to our CanvasManager
canvasManager . setCanvas ( document . getElementById ( "flexCanvasApplication" ) ) ;
//Set up our color picker - add style definitions, event listeners, etc.
colorPicker . setStyle ( "X" , 50 ) ;
colorPicker . setStyle ( "Y" , 50 ) ;
//Add colorPicker to CanvasManager
canvasManager . addElement ( colorPicker ) ;
}
