Внезапно возникает идея, если вы можете поставить несколько разных точек знаний на одном и том же интерфейсе и положить ее в коробку, поэтому, если я хочу посмотреть на что -либо, его можно отобразить напрямую, и эта коробка должна быть в состоянии открыть его. Сущность Я использовал HT, чтобы реализовать свою идею, с более чем сотней строк кода, поэтому мало кода может достичь этого эффекта.
Давайте посмотрим на визуализации:
Самым основным из этого примера является самая внешняя коробка, поэтому давайте посмотрим, как его достичь:
var box = new ht.csgbox ();
Использование HT может легко реализовать эту коробку.
Инкапсулированная базовая карта, используемая в этом примере, - это HT.CSGBOX, модель ящика, вы можете ссылаться на HT для руководства по веб -моделию. HT.Style (HT для руководства по веб -стилю).
Если вы хотите добавить наклейку на одну сторону коробки, только то, о чем я могу придумать, это инкапсулированная функция ht.default.setimage.
Метод, который я здесь реализовал, состоит в том, чтобы ссылаться на редактор HT для работы, повторно поставить компонент GraphView и модель данных DataModel, а затем вызовет JSON через метод ht.default.xhrload. Контент в JSON в качестве визуального интерфейса, затем устанавливает анимацию, а затем немедленно обновляет интерфейс этого JSON.
ht.default.xhrload ('displays/demo/pump.json', function (text) {const json = ht.default.parse (text); pumpdm.deserialize (json); var curent rowation = 0; var fasttime = new date () .getTime (); (CurrentRotation);В это время я не могу добавить PumpGV и G3D в нижний DIV, и я намерен добавить PumpGV в сторону CSGBox в G3D. не завершен. Если вы хотите увидеть влияние этой широкой высоты на дисплее, вы можете изменить его самостоятельно.
pumpgv.getwidth = function () {return 600;} pumpgv.getheight = function () {return 600;} pumpgv.getCanvas ().Отображение диаграммы Echarts также очень простое.
В конце концов, вам нужно только передать эти два возвращенных холста в ht.default.setimage ::
ht.default.setimage ('echart', charts (option));Функция ht.default.drawimage генерирует новую диаграмму, фактически рисует изображения на холсте, поэтому нам нужно только передать холст, который мы нарисовали в ht.default.setimage для создания изображений.
Одно нужно улучшить. Когда есть прозрачность, нам нужно установить все. Перенос прозрачна True.
Мы можем установить прозрачный: true, который необходимо отобразить. Посмотрите на визуализации после завершения:
СуммироватьВыше представлено, как HSOMGL -диаграмма, основанная на HTML5, представлена всем. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!