FlexCanvasJS
v1.3.2
Crie facilmente aplicativos ricos na Internet usando a tela 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.
Os eventos mais típicos da interface do usuário, incluindo fases de captura e borbulha, são suportados, incluindo, entre outros, mouse, teclado, foco, rolagem, etc ...
Layouts escaláveis complexos são facilmente alcançados por elementos de contêiner de aninhamento. Contêineres acionados por dados, como Datalist e Datagrid, permitem a exibição de conjuntos de dados muito grandes enquanto apenas tornam o que é visível na tela para manter um excelente desempenho e se vincular também e se atualizará automaticamente como suas alterações de coleta de dados associadas.
Um sistema robusto de estilo e pele é fornecido, permitindo modificar e personalizar facilmente a aparência e o comportamento de qualquer controle da interface do usuário.
O FlexCanvasjs faz o levantamento pesado para você. Renderizar armazenamento em cache, regiões redraigentes, camadas compostas e efeitos são todos automáticos, para um bom desempenho, mesmo nos aplicativos e jogos mais complexos, animados e fortemente em camadas.
Tudo o que você precisa é da biblioteca Minified FlexCanvasjs e uma tela HTML. Faça o download da biblioteca minificada do último lançamento.
O exemplo abaixo está usando uma tela de tela cheia, embora qualquer tela funcione.
<!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 >Agora, anexe a tela Dom ao FlexCanvasjs CanvasManager e crie e estilize nossos elementos:
//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 ) ;
}
