Эффект для реализации на основе холста HTML5

Когда пользовательская мышь перемещается, существует рамка для поп -музыки. Это просто при работе с HTML -элементами, но если он обрабатывается графикой, состоящей из холста HTML5, этот метод больше не применим, поскольку Canvas использует другой набор механизмов. один в целом. Сама графика на самом деле является частью холста. Тем не менее, в HT для Интернета, это требование легко реализовать, и сцена следующая:

Эта сцена основана на JSON File HT для Интернета Расширен, и легко настроить, чтобы удовлетворить редактор топологии, который удовлетворяет мои потребности. Мало того, что в этой демонстрации векторная таблица трех типов бомбардировочных рам «tips1.json», «tips2.json», «tips3.json» через этот векторный редактор (http: //www.hightopo. Com. /Demo/vector-editor/index.html) просто нарисована, и это довольно проще в использовании. В приведенном выше сценарии, когда пользователь перемещает мышь в траву и другие объекты, появится подробная информация о поле для отображения.

Конкретная реализация заключается в следующем:

Представьте наш HT (http://www.hightopo.com/) :):

 <script src = 'ht.js'> </script> dataModel = new ht.datamodel ();

HT обеспечивает индивидуальную форму Vector в формате JSON. Здесь зарегистрируйте три -форму json pop -up -up -up в картинки для последующих вызовов:

 ht.default.setimage ('tips1', 'symbols /tips1.json');

Затем получите объект с интерактивными эффектами, имена атрибутов объектов - это имя метки, установленное для каждого изображения:

 // tree var time = {'time1': true, 'tree2': true, 'tree3': true}; };

На самом деле, суть поставки -это узел.

1. Управление скрытым и отображение узла может достичь эффекта рамки бомбы;

2. Изменение позиции мыши сопровождается изменением позиции узла;

3. Когда мышь перемещается в разные объекты, текстура на узле также меняется;

4. Значение атрибута в узле также меняется с положением мыши.

Поэтому для достижения кадры пули сначала создайте новый узел и установите уровень на «более высокий».

 ht.default.xhrload ('meadow.json', function (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; deserialize (json); // Установите иерархическую DataModel.each (function (data) {data.setlayer ('lower');}); ;;

Затем, чтобы прислушиваться к инциденту MouseMove на нижнем слое, судите, находится ли положение мыши выше трех объектов, и вызовите функцию Layout () в узле re -layout в соответствии с типом объекта:

 GraphView.getView (). (! Hoverdata) return; tips2 ');} else if (mountain [holddata.gettg ()]) {layout (node, pos,' tips3 ');}});});

Что детально выполнена функция Mayout (). .

1. Тип функции, напрямую вызовите функцию и проходите в связанных данных и объектах View.

2. Тип строки:

Начиная с@***, возвращается значение data.getstyle (***), которое является именем атрибута стиля.

В начале attr@*** значение data.getattr (***) возвращается, где *** представляет имя атрибута атри.

В начале поле@*** Данные.

Если вышеуказанные ситуации не соответствуют, тип строки напрямую называется Data *** (View) в качестве имени функции объекта Data, а возвращаемое значение используется в качестве значения параметра.

В дополнение к атрибуту Func вы также можете установить атрибут значения в качестве значения по умолчанию. Руководство по привязке веб-данных для веб-данных (http:/www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). Например, здесь, результаты связывания данных значения солнечного света в файле «tips1.json» заключаются в следующем:

 Текст: {func: attr@sunshine, значение: значение солнечного света},

Поместите исходный код функции Mayout ():

 Функция (Node, POS, тип) {node.s ('2D.visible', true); getWidth ()/2, pos.y -node.getheigh ()/2); : 'Значение дождевой росы:'+ (pos.y/1000) .tofixed (2), 'love': ': value: ***'});} else if (type == 'tips2') {Узел .SetPosition (pos.x, pos.y -node.getheight ()/2); x // 100)+'%'});} else if (type == 'tips3') {node.setposition (pos.x -node.getwidth ()/2, pos.y -node.getheigh ()/ 2);

Наконец, наша демонстрация также обладает облачной мобильной анимацией. .

Основанный на кадре пользователи управляют эффектом анимации, указав количество анимационных кадров кадров и параметр интервала интервала интервальной анимации;

Пользователи, основанные на времени, должны указать только миллисекунды цикла анимации.

Для получения подробной информации см. HT для Интернета.

Здесь мы используем метод, основанный на времени.

 Var Cloud = DataModel.getDatabytag ('Cloud'); .getPosition (). End == Раунд1)? * v, py);}};

Наконец, нанесите нашу демонстрацию снова для вашего ссылки.