Встроенные функции перетаскивания в HTML5. Атрибуты элемента OBJECT Простые трехмерные объекты
В демонстрации показан мост между двухмерной графикой в HTML5 и по-настоящему трехмерной (с помощью WebGL). Цель статьи показать, как нарисовать трехмерные объекты с помощью polygonal mesh. Polygonal mesh представляет собой набор вершин, ребер и граней, которые определяет форму многогранных объектов в 3D компьютерной графики и твердотельного моделирования.
Простые трехмерные объектыФасад состоит из треугольников, четырехугольников или других простых многоугольников. Чтобы продемонстрировать это, мы подготовили простые трехмерные объекты — куб и многогранные сферы (с переменным числом граней).
Нарисовать трехмерные объекты Шаг 1. HTMLКак обычно (для всех canvas на основе демо) у нас есть очень простая разметка HTML (с одним объектом внутри, canvas):
Каркас 3D объектов в HTML5 Используйте кнопки Вверх / Вниз, чтобы управлять прозрачностью объекта
Извлечение инициализации объекта, смотрите:
//var obj = new cube(); //var obj = new sphere(6); var obj = new sphere(16);
Это означает, что если нам нужно вывести куб — вы должны раскомментировать первую строку, если вы хотите отобразить сферу с 6 граней — нужно выбрать второй вариант.
Шаг 2. JSЕсть три файла JavaScript (main.js, meshes.js и transform.js), мы публикуем два из них, третий (transform.js) содержит только функций вычислений, связанных с вращением, масштабированием и объектов проекта. Итак, давайте рассмотрим код первого JavaScript:
js/meshes.js // Получить случайный цвет function getRandomColor() { var letters = "0123456789ABCDEF".split(""); var color = "#"; for (var i = 0; i < 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }В самом начале, мы должны подготовить все точки и фасад наших объектов. Есть 2-ве функции: куб (который генерирует начальные массивы для простого объекта куба) и сферы (для генерации сферы). Гораздо сложнее вычислить все точки и фасады для многогранной сферы. Как только мы получим все эти точки и поверхности, мы должны вычислить другие параметры (например, расстояние, абсолютный центр и три оси).
// Внутренние переменные var canvas, ctx; var vAlpha = 0.5; var vShiftX = vShiftY = 0; var distance = -700; var vMouseSens = 0.05; var iHalfX, iHalfY; // Инициализация function sceneInit() { // Подготовка холста и контекст объектов canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas.height / 2; // Начальный масштаб и перевод scaleObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Подключить обработчику событий document.onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Основной цикл setInterval(drawScene, 25); } // Обработчик событий OnKeyDown function handleKeydown(e) { kCode = ((e.which) || (e.keyCode)); switch (kCode) { case 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key } } // Обработчик события OnMouseMove function handleMousemove(e) { var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((x > 0) && (x < canvas.width) && (y > 0) && (y < canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] > max) max = obj.distances[f]]; } aFaceTriangles = {faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max}; } aFaceTriangles.sort(sortByDistance); // Подготовка массива с прогнозируемым пунктов var aPrjPoints = new Array(); for (var i = 0; i < obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }
Как только страница загружена, мы делаем основную инициализацию (функция sceneInit). Мы создаем canvas и контекст объектов, значит мы выполняем начальный масштаб и переводим наши объекты, которые создали в самом начале (куб или шар). Затем мы придаем обработчикам событий OnKeyDown и OnMouseMove и установим таймер, чтобы сделать нашу основную сцену (функция DrawScene). Не забывайте, что мы можем изменить globalAlpha параметры с нажатием клавиш Вверх/Вниз.
Элемент (от англ. object - объект) сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
Дополнительно внутрь контейнера можно поместить элемент , который передаёт дополнительные параметры для отображения объекта.
СинтаксисЗакрывающий тегОбязателен.
АтрибутыПримерOBJECT
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Атрибуты элемента OBJECT
Этот элемент позволяет встроить на сайт любой мультимедиа-объект вместе с программой обработки данного объекта. В этом разделе мы рассмотрим вопросы встраивания музыки, видео и Flash-анимации. Однако возможности элемента OBJECT намного шире: в принципе, вы можете встраивать в страницу любое активное содержимое, главное, чтобы у пользователя была программа для обработки этого объекта.
Элемент OBJECT использует программы, находящиеся на компьютере посетителя, и с их помощью воспроизводит активное содержимое. Он может использовать программу проигрывания по умолчанию для конкретного типа файлов, если этот тип файлов знаком браузеру, или использовать конкретную указанную вами программу, если она есть на компьютере пользователя.
У этого элемента много атрибутов. Очевидно, что не все они являются обязательными, точнее, у этого элемента нет строго обязательных атрибутов. Однако среди них можно выделить наиболее важные, которые упростят и ускорят обработку вашего объекта браузером.
Атрибут classid указывает адрес программы, которая будет работать с объектом. В качестве значения этого атрибута можно указывать полный или относительный путь к файлу программы. Это не всегда удобно, потому что на разных компьютерах программы располагаются в разных местах, а на серверах обычно не бывает программ, необходимых для воспроизведения мультимедиа-файлов. Удобнее второй метод: использование идентификатора зарегистрированного ActiveX-приложения. В этом случае перед самим идентификатором должно стоять ключевое слово clsid, как в листинге 4.11. Чаще всего применяют именно второй вариант, потому что он универсален. Идентификаторы для различных приложений и активных объектов легко найти в Интернете.
Атрибут codetype должен принимать значение, содержащее MIME-тип объекта, который указан в атрибуте classid. Браузер использует эту информацию для подготовки ресурсов, необходимых для запуска файла.
Совет
MIME-тип (Multipurpose Internet Mail Extensions) – стандарт, используемый в Интернете, для указания типа объекта. Тип, соответствующий вашему объекту, можно посмотреть в реестре. Для этого в папке HKEY_CLASSES_ROOT нужно открыть папку с разрешением, соответствующим вашему объекту, и в строке Content Type будет указан MIME-тип объекта.
В листинге 4.11 показано применение атрибутов classid и codetype.
Листинг 4.11. Использование атрибутов classid и codetype
Встраивание объектов
В примере указан идентификатор для Проигрывателя Windows Media, а тип – для проигрывания МР3-файла. При просмотре страницы вы увидите проигрыватель, готовый к запуску (рис. 4.12).
Рис. 4.12. Вставка Проигрывателя Windows Media
Атрибут data в качестве значения принимает адрес файла, который необходимо запустить с помощью проигрывателя. Правда, такой метод определения файла используется не всегда – иногда имя файла для запуска нужно передавать через элемент PARAM. Путь к файлу необходимо указывать относительно папки, заданной атрибутом codebase. Если значение этого атрибута не указано, то путь следует задать относительно текущего документа.
Атрибут type задает тип объекта, который указан в параметре data. Здесь нужно указывать MIME-тип объекта. Это позволит браузеру выбрать программу для воспроизведения файла. Если вы не укажете конкретную программу для воспроизведения, то браузер сам выберет приложение для воспроизведения файлов заданного типа. Значение атрибута type браузер использует, когда не указано значение атрибута codetype.
В листинге 4.12 приведен код, который запустит файл test. mp3 на проигрывание.
Листинг 4.12. Использование атрибутов data и type
Встраивание объектов
Если вам понадобилось встроить на страницу Java-апплет, используйте атрибут code и в качестве его значения укажите имя класса вашего Java-апплета. По сути этот атрибут используется вместо элемента APPLET.
В листинге 4.13 представлен пример встраивания апплета.
Листинг 4.13. Встраивание Java-апплетов
Встраивание объектов
С атрибутом codebase вы встречались уже несколько раз, он указывает путь к папке, в которой хранятся файлы, используемые этим объектом. Пути ко всем файлам определяются в элементе OBJECT относительно папки, указанной в качестве значения этого атрибута.
Помимо атрибутов, отвечающих за основные функции объекта, нас интересуют атрибуты, позволяющие управлять видом объекта на странице. Именно такие атрибуты элемента OBJECT мы рассмотрим далее.
Для выравнивания объекта на странице служит атрибут align, его значения аналогичны значениям этого атрибута для элемента IMG, но я их повторю на всякий случай.
Горизонтальное выравнивание:
Left – по левому краю;
Right – по правому краю.
Вертикальное выравнивание:
Top – выравнивание верхней границы объекта по самому высокому элементу строки;
Texttop – выравнивание верхней границы объекта по самому высокому элементу текста;
Middle – середина объекта выравнивается по базовой линии строки;
Absmiddle – середина объекта выравнивается по середине строки;
Baseline – выравнивание нижней границы объекта по базовой линии строки;
Bottom – аналогично baseline;
Absbottom – нижняя граница объекта выравнивается по нижней границе текущей строки.
За размеры объекта отвечают атрибуты height и width, они устанавливают его высоту и ширину соответственно. Эти параметры задают размеры окна приложения, которое будет использовано для воспроизведения файла. Иначе говоря, если вы воспроизводите видеофайл, то заданные высота и ширина будут указывать не только размер экрана, в них будет включен еще и размер панели проигрывателя.
Как и для картинок, для объектов можно задавать расстояние до текста с помощью атрибутов hspace и vspace.
Благодаря атрибутам элемента OBJECT вы можете менять общие параметры вашего объекта, но есть еще один очень важный элемент, позволяющий задавать параметры самого приложения, в котором происходит воспроизведение.
Данный текст является ознакомительным фрагментом. Из книги Язык программирования С# 2005 и платформа.NET 2.0. автора Троелсен ЭндрюМастер-класс: System.Object Совет. Следующий обзор System.Object предполагает, что вы знакомы с понятиями виртуального метода и переопределения методов. Если мир ООП для вас является новым, вы можете вернуться к этому разделу после изучения материала главы 4.В.NET каждый тип в конечном
Из книги 3ds Max 2008 автора Верстак Владимир АнтоновичПереопределение System.Object.ToString() Переопределение метода ToString() дает возможность получить "снимок" текущего состояния объекта. Это может оказаться полезным в процессе отладки. Для примера давайте переопределим System.Object.ToString() так, чтобы возвращалось текстовое представление
Из книги Объектно-ориентированный анализ и проектирование с примерами приложений на С++ автора Буч ГрадиПереопределение System.Object. Equals() Давайте переопределим и поведение System.Object.Equals(), чтобы иметь возможность работать с семантикой, основанной на значениях. Напомним, что по умолчанию Equals() возвращает true (истина), когда обе сравниваемые ссылки указывают на один и тот же объект в
Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей ВладимировичПереопределение System.Object.GetHashCode() Если класс переопределяет метод Equals(), следует переопределить и метод System.Object.GetHashCode(). Не сделав этого, вы получите предупреждение компилятора. Роль GetHashCode() – возвратить числовое значение, которое идентифицирует объект в зависимости от его
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов ВладимирСтатические члены System.Object В завершение нашего обсуждения базового класса.NET, находящегося на вершине иерархии классов, следует отметить, что System.Object определяет два статических члена (Object.Equals() и Object.ReferenceEquals()), обеспечивающих проверку на равенство значений и ссылок
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов ВладимирMulti/Sub-Object (Многокомпонентный) Материал Multi/Sub-Object (Многокомпонентный) является одним из наиболее применяемых составных материалов. Он позволяет назначить объекту более одного материала на уровне грани посредством Material ID (Идентификатора материала). Для этих целей может
Из книги Macromedia Flash Professional 8. Графика и анимация автора Дронов В. А. Из книги HTML, XHTML и CSS на 100% автора Квинт ИгорьЭлемент Элемент предлагает еще один способ создания экземпляра COM-объектов для использования их внутри сценариев. Напомним, что ранее для этого мы использовали методы CreateObject и GetObject объекта WScript, объект ActiveXObject и функцию GetObject языка JScript, а также функцию
Из книги Виртуальная библиотека Delphi автораЭлементы , и Элементы , и имеют тот же смысл, что и в модели WS XML (см. описание этих элементов в главе
Из книги автора Из книги автораОбъект Object и использование его экземпляров Но об одном встроенном объекте следует поговорить особо. Это объект Object, весьма специфический.Экземпляры этого объекта обычно используются для хранения сложных структур данных, включающих произвольный набор свойств и методов.
Из книги автораТеги и Собственно, оба тега - и , и - выполняют одну и ту же задачу. Они задают местоположение внедренного элемента на Web-странице и интернет-адрес файла, содержащего данные, необходимые для отображения этого элемента. Различие их состоит
Из книги автораДополнительные возможности элемента OBJECT Посмотрим, что еще можно добавить на сайт с помощью элемента OBJECT.В качестве объекта на сайт можно добавить картинку:Можно добавить другой сайт: