FlexCanvasJS
v1.3.2
Erstellen Sie mit der HTML5 -Leinwand einfach reichhaltige Internetanwendungen.
Flexcanvasjs bietet hoch anpassbare interaktive Leinwand -Display -Elemente, hierarchische Elemente / Kinder -Anzeigeliste, UI -Ereignisse, Styling und Skinning, relative und dynamische Layouts, automatische Wiederholungsregionen und enthält viele UI -Steuerelemente wie Schaltflächen, Kontrollkästchen, Dropdowns, Datagrids, Date Pickers, Customs und Wickeln und Wickeln und Wickeln und Wickeln und Wickeln und Füllungen und ordnungsable und ordnungsable.
Die meisten typischen UI -Ereignisse, einschließlich Erfassungs- und Blasenphasen, werden unterstützt, einschließlich, aber nicht beschränkt auf Maus, Tastatur, Fokus, Rollover usw.
Komplexe skalierbare Layouts lassen sich leicht durch Verschachteln von Behälterelementen erreicht. Datenorientierte Container wie Datalist und DataGrid ermöglichen es, sehr große Datensätze anzuzeigen, während nur das auf dem Bildschirm sichtbar ist, um eine hervorragende Leistung beizubehalten, und werden auch automatisch mit ihren zugehörigen Datenerfassung ändert.
Es wird ein robustes Styling- und Skinning -System ermöglicht, mit dem Sie das Erscheinungsbild und das Verhalten einer UI -Kontrolle leicht ändern und anpassen können.
Flexcanvasjs macht das schwere Heben für Sie. Rendern Caching, neue Regionen, zusammengesetzte Schichten und Effekte sind automatisch, für eine gute Leistung auch in den komplexesten, animierten und stark geschichteten Anwendungen und Spielen.
Alles, was Sie brauchen, ist die Minimified Flexcanvasjs -Bibliothek und eine HTML -Leinwand. Laden Sie die Minimified Library aus der neuesten Version herunter.
Beispiel unten ist die Verwendung einer Vollbildkanal -Leinwand, obwohl jede Leinwand funktioniert.
<!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 >Befestigen Sie nun die DOM -Leinwand an den Flexcanvasjs Canvasmanager und erstellen und stylen Sie unsere Elemente:
//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 ) ;
}
