De repente, hay una idea, si puede poner algunos puntos de conocimiento diferentes en la misma interfaz y ponerla en una caja, por lo que si quiero mirar algo, se puede mostrar directamente, y esta caja debe poder abrirla. Esencia Usé HT para realizar mi idea, con más de cien líneas de código, por lo que pocos código pueden lograr este efecto.
Echemos un vistazo a las representaciones:
El más básico de este ejemplo es el cuadro más externo, así que echemos un vistazo a cómo lograrlo:
var box = new ht.csgbox ();
El uso de HT puede implementar fácilmente este cuadro.
El mapa básico encapsulado utilizado en este ejemplo es HT.CSGBox, un modelo de caja, puede consultar el HT para el Manual de modelado web. Ht.Style (HT para el manual de estilo web).
Si desea agregar una pegatina en un lado de la caja, solo lo que puedo pensar es ht.default.setimage función encapsulada.
El método que implementé aquí es consultar el editor de HT para operar, rehacer un componente GraphView y un modelo de datos DataModel, y luego llamar a JSON a través del método ht.default.xhrrload. El contenido en JSON como interfaz visual, luego establece la animación y luego actualiza inmediatamente la interfaz de este JSON.
ht.default.xhrload ('displays/demo/bombe.json', function (text) {const json = ht.default.parse (text); Pumpdm.eserialize (JSON); var rotación de curent = 0; var lasttime = newTime date () .GetTime (); (CurrentRotation);En este momento no puedo agregar PumpGV y G3D al Div inferior, y mi intención es agregar PumpGV al lado del CSGBox en G3D. no está completo. Si desea ver el impacto de esta amplia altura en la pantalla, puede cambiarlo usted mismo.
Pumpgv.getWidth = function () {return 600;} Pumpgv.getheight = function () {return 600;} Pumpgv.getCanvas ().La visualización de la tabla de Echarts también es muy básica.
Al final, solo necesita pasar estos dos lienzos devueltos a ht.default.setImage ::
ht.default.setImage ('Echart', gráficos (opción));La función ht.default.drawimage genera un nuevo diagrama en realidad dibuja imágenes en el lienzo, por lo que solo necesitamos pasar el lienzo que hemos dibujado a HT.Default.SetImage para generar imágenes.
Una cosa debe mejorarse. Cuando hay transparencia, necesitamos establecer todo. Transparente a verdadero.
Podemos establecer el transparente: verdadero que debe mostrarse. Mire las representaciones después de la finalización:
ResumirLo anterior es la implementación de WebGL basada en HTML5 de las listas de JSON y Echarts introducidas a todos a todos. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!