FlexCanvasJS
v1.3.2
Легко создавать богатые интернет -приложения, используя холст HTML5.
FlexCanvasJS provides highly customizable user interactive canvas display elements, hierarchical parent / child display list, UI events, styling and skinning, relative and dynamic layouts, automatic redraw regions, and includes many UI controls such as buttons, checkboxes, dropdowns, datagrids, color pickers, date pickers, editable and wrapping text controls, and more, while also allowing easy creation of custom components or controls.
Большинство типичных событий пользовательского интерфейса, включая фазы захвата и пузырьков, включаются, включая, помимо прочего, мышь, клавиатуру, фокусировку, перенос и т. Д.
Сложные масштабируемые макеты легко достигаются путем гнездования элементов контейнера. Контейнеры, управляемые данными, такие как Datalist и DataGrid, позволяют отображать очень большие наборы данных, в то время как только то, что видно на экране, чтобы поддерживать превосходную производительность, а также будет привязаться и автоматически обновлять как связанные с ними изменения сбора данных.
Прочная система стиля и скина предоставляется, позволяющая легко изменять и настроить внешний вид и поведение любого управления пользовательским интерфейсом.
Flexcanvasjs делает тяжелую работу для вас. Распределение кэширования, регионов перекрасовки, составных слоев и эффектов - все это автоматическое, для хорошей производительности даже в самых сложных, анимированных и сильно слоистых приложениях и играх.
Все, что вам нужно, это библиотека Flexcanvasjs и 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 и создайте и стилизуйте наши элементы:
//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 ) ;
}
