Я обнаружил, что в промышленной SCADA или управлении телекоммуникационными сетями используется множество диаграмм. Хотя большинство людей используют электронные диаграммы, их действительно легко использовать. Однако в настоящее время мы не можем вызвать другие плагины. нам придется написать свои собственные. Это красивые диаграммы, но их нелегко сделать красивыми. . . Я увидел выставленную на продажу диаграмму на веб-сайте и подумал, что она выглядит довольно хорошо, поэтому я использовал HT for Web 3D, чтобы сделать небольшой пример. Это было довольно просто и красиво, ха-ха~.
Динамический рендеринг выглядит следующим образом:
Этот пример очень легко реализовать с помощью HT. Сначала создайте базовую модель данных dm в HT, затем добавьте модель данных в 3d-компонент g3d, затем установите перспективу в 3d и добавьте 3d-компонент в элемент body:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# 000';
Следующим шагом будет создание этих пяти полосок диаграммы. Моя идея такова: есть узел во внутреннем слое, прозрачный узел во внешнем слое и трехмерный текст внизу для отображения текущего процента.
Внутренний узел очень прост. Я напрямую использую ht.Node, инкапсулированный HT, для создания нового объекта узла, а затем задаю стиль узла с помощью метода node.s:
var node = new ht.Node();node.s({ 'shape3d': цилиндрическая модель, 'shape3d.color': цвет, '3d.movable': false});node.a({ 'myHeight': s3[ 1],});node.p3([p3[0], s3[1]/2, p3[2]]);node.s3(s3);dm.add(узел);Необходимо объяснить настройку стиля shape3d:cylinderModel. Во-первых, атрибут shape3d определяет эффект значка, отображаемый в виде 3D-модели. :
цилиндрМодель = ht.Default.createCylinderModel(1000, 0, 1000, ложь, ложь, правда, правда);
Затем устанавливается динамически изменяющийся атрибут myHeight. В HT метод node.a зарезервирован для хранения бизнес-данных пользователей. Здесь можно добавить любое количество атрибутов.
Далее нам нужно создать внешний прозрачный узел. Этот узел в основном построен так же, как и внутренний узел, за исключением того, что он имеет немного более прозрачные настройки стиля:
var cNode = new ht.Node();cNode.s({ 'shape3d': цилиндрическая модель, 'shape3d.transparent': true, 'shape3d.opacity': 0,2, 'label.color': '#fff', '3d .movable': false});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);Чтобы сначала установить для shape3d.transparent значение true, затем установить прозрачность shape3d.opacity.
Наконец, есть 3D-текст. Для рендеринга 3D-текста вам понадобится шрифт в формате json, а затем используйте ht.Default.loadFontFace для загрузки шрифта формата json в память. Подробную информацию см. в разделе HT для Web 3D. руководство:
ht.Default.loadFontFace('./wenquaNY.json', function(){ //...... var text = new ht.Node(); text.s3([5, 5, 5]); text .p3(cNode.p3()[0]-5, -10, 0); dm.add(text); text.s({ 'shape3d': 'text', 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});Поскольку шрифт, который мы используем, нарисован таким образом, что одно слово состоит из бесчисленных треугольников, что занимает много памяти, поэтому я снизил четкость графической кривой, но она по-прежнему очень ясна. вы можете найти лучшую производительность. Можно использовать хорошие шрифты, и дайте мне знать. Мы не нашли шрифтов, использующих небольшой объем памяти.
Наконец, чтобы динамически изменять гистограмму на диаграмме, нам нужно установить анимацию и синхронно обновлять значения 3D-шрифта:
setInterval(function(){ if(node.a('myHeight') < 100){ node.a('myHeight', (node.getAttr('myHeight')+1)); node.s3(20, node. a('myHeight'), 20 node.p3(p3[0], node.a('myHeight')/2, p3[2]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]]); if (text) text. s('shape3d.text', node.a('myHeight')+'%');}, 100);Здесь решающую роль играет мой пользовательский атрибут myHeight. Я использую этот атрибут для хранения переменных, причем значение переменной можно изменять произвольно, чтобы можно было достичь эффекта динамической привязки.
Если вы все еще не понимаете, вы можете оставить сообщение или перейти непосредственно на наш официальный сайт, чтобы просмотреть руководство по HT для Интернета. Есть и другие эффекты, о которых вы даже не догадываетесь, но которых можно быстро достичь~.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.