FlexCanvasJS
v1.3.2
قم بإنشاء تطبيقات إنترنت غنية بسهولة باستخدام قماش HTML5.
يوفر FlexCanvasjs عناصر عرض قماشية قابلة للتخصيص بشكل كبير ، وقائمة عرض الوالدين / الطفل الهرمية ، وأحداث واجهة المستخدم ، والتصميم والبخار ، والتخطيطات النسبية والديناميكية ، والمناطق التلقائية لإعادة الرسم ، وتتضمن العديد من عناصر التحكم في واجهة المستخدم مثل الأزرار ، وعلامات الاختيار ، وتجمعات التخليص ، واللون ، واللون ، والتحكم في النص ، والمزيد ، والمزيد من الضوابط.
يتم دعم معظم أحداث واجهة المستخدم النموذجية بما في ذلك مراحل الالتقاط والفقاعات بما في ذلك على سبيل المثال لا الحصر ، الماوس ، لوحة المفاتيح ، التركيز ، التمديد ، إلخ ...
يتم تحقيق تخطيطات قابلة للتطوير المعقدة بسهولة عن طريق عناصر حاوية التعشيش. تتيح الحاويات التي تعتمد على البيانات مثل Dataalist و DataGrid عرض مجموعات بيانات كبيرة جدًا مع تقديم ما هو مرئي على الشاشة فقط للحفاظ على أداء ممتاز وسيقوم بالربط أيضًا ويتم تحديثه تلقائيًا مع تغييرات جمع البيانات المرتبطة بها.
يتم توفير نظام قوي للتصميم والبخار مما يتيح لك تعديل وتخصيص ظهور وسلوك أي عنصر تحكم واجهة المستخدم بسهولة.
FlexCanvasjs يفعل الرفع الثقيل لك. إن تقديم التخزين المؤقت ، ومناطق إعادة الرسم ، والطبقات المركبة والتأثيرات كلها تلقائية ، من أجل الأداء الجيد حتى في التطبيقات والألعاب الأكثر تعقيدًا والرسوم المتحركة والطبقات.
كل ما تحتاجه هو مكتبة FlexCanvasjs Miniled و Canvas HTML. قم بتنزيل المكتبة المصغرة من أحدث إصدار.
مثال أدناه هو استخدام قماش ملء الشاشة ، على الرغم من أن أي قماش ستعمل.
<!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 بـ 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 ) ;
}
