De repente, há uma idéia, se você puder colocar alguns pontos de conhecimento diferentes na mesma interface e colocá -la em uma caixa; portanto, se eu quiser olhar para qualquer coisa, ela pode ser exibida diretamente e esta caixa deve ser capaz de abri -la. Essência Eu usei o HT para perceber minha ideia, com mais de cem linhas de código, então poucos códigos podem alcançar esse efeito.
Vamos dar uma olhada nas renderizações:
O mais básico deste exemplo é a caixa mais externa, então vamos dar uma olhada em como alcançá -la:
var box = novo ht.csgbox ();
O uso de HT pode implementar facilmente esta caixa.
O mapa básico encapsulado usado neste exemplo é o HT.CSGBOX, um modelo de caixa, você pode consultar o manual de modelagem HT para Web. ht.style (ht para manual de estilo web).
Se você deseja adicionar um adesivo em um lado da caixa, apenas o que eu consigo pensar é a função ht.default.setImage encapsulada.
O método que implementei aqui é consultar o editor da HT para operar, re -redimensionar um componente GraphView e um modelo de dados de datamodel e depois ligar para o JSON através do método HT.Default.xhrload. O conteúdo do JSON como uma interface visual e depois define a animação e atualiza imediatamente a interface deste JSON.
ht.default.xhrload ('Displays/Demo/Pump.json', function (text) {const json = ht.default.parse (text); bombeddmm.Deserialize (JSON); var de rotação curent = 0; Var LastTime = novo DATE () .getTime (); (CurrentRoTation);Nesse momento, não posso adicionar o bomba e o G3D à divisão, e minha intenção é adicionar a bomba ao lado do CSGBox em G3D. não está completo. Se você quiser ver o impacto dessa ampla altura na tela, poderá alterá -lo você mesmo.
PumpGV.getWidth = function () {Retorno 600;} BOMBEGV.GETHEION = function () {Retorno 600;} Pumpgv.getCanvas ().A exibição do gráfico ECHARTS também é muito básica.
No final, você só precisa passar por essas duas lonvas retornadas para ht.default.setImage ::
ht.default.setImage ('Echart', gráficos (opção));A função ht.default.Drawimage gera um novo diagrama realmente desenha figuras na tela, por isso precisamos passar apenas a tela que desenhamos para ht.default.setImage para gerar imagens.
Uma coisa precisa ser melhorada. Quando há transparência, precisamos definir tudo.
Podemos definir o transparente: true que precisa ser exibido. Veja as renderizações após a conclusão:
ResumirO acima é a implementação do WebGL de HTML5 dos gráficos JSON e ECHARTS introduzidos a todos. Muito obrigado pelo seu apoio ao site VevB Wulin!