Создаем простую панель для рисования 3D

Сегодня мы собираемся вернуться к практическим занятиям по HTML5. Я думаю, что мы уже сделали хороший перерыв в наших уроках. В этом уроке я покажу вам, как создать панель для рисования которая вращается вокруг своей оси (на объекте холста HTML5). Каждый из ваших нарисованных фигур будет вращаться в псевдо 3D режиме. Для этого нам необходимо определить два объекта: точки и формы (каждая фигура состоит из нескольких пунктов). Основная идея — проектировать и вращать точки фигур, а также нарисовать кривую линию между этими точками.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Такую реализацию можно не много где применить, но основная идея состоит в том, чтобы показать вам некоторые возможности псевдо 3D. И так, приступим.

Шаг 1. HTML

Для начала нам необходимо подключить скрипты, и создать достаточно простую разметку, которая будет состоять из одной строчки, а именно вызов панели:

<script src="js/pointer.js"></script>
<script src="js/main.js"></script>

....

<canvas id="scene" height="600" width="800" tabindex="1"></canvas>

....

Шаг 2. JS

Как обычно, в начале каждого JS кода, мы можем определить несколько глобальных переменных:

JS / main.js

// Переменные
var canvas, ctx; // canvas и объекты
var vPointer; // Рисуем указатель Pbject
var aShapes = []; // Формы массива
var iLMx = iLMy = 0; // Последний указатель позиции
var vActShape; // Активные формы объекта

// Переменные

var canvas, ctx; // canvas и объекты

var vPointer; // Рисуем указатель Pbject

var aShapes = []; // Формы массива

var iLMx = iLMy = 0; // Последний указатель позиции

var vActShape; // Активные формы объекта

Теперь мы можешь высчитать и указать первый уровень-точки:

var Point = function (x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.x0 = x;
this.z0 = z;
this.xp = 0;
this.yp = 0;
this.zp = 0;
this.fov = 2000;
}
Point.prototype.project = function () {
this.zp = this.fov / (this.fov + this.z);
this.xp = this.x * this.zp;
this.yp = this.y * this.zp;
}
Point.prototype.rotate = function (ax, ay) {
this.x = parseInt(Math.round(this.x0 * ax + this.z0 * ay));
this.z = parseInt(Math.round(this.x0 * -ay + this.z0 * ax));
}

var Point = function (x, y, z) {

this.x = x;

this.y = y;

this.z = z;

this.x0 = x;

this.z0 = z;

this.xp = 0;

this.yp = 0;

this.zp = 0;

this.fov = 2000;

}

Point.prototype.project = function () {

this.zp = this.fov / (this.fov + this.z);

this.xp = this.x * this.zp;

this.yp = this.y * this.zp;

}

Point.prototype.rotate = function (ax, ay) {

this.x = parseInt(Math.round(this.x0 * ax + this.z0 * ay));

this.z = parseInt(Math.round(this.x0 * -ay + this.z0 * ax));

}

Для «Роint» объекта у нас есть целый набор внутренних свойств и только две функции: проект и вращение. «Shape» являются более сложным объектом:

// Форма объекта
var Shape = function () {
this.angle = 0;
this.color = '#000';
this.halfheight = canvas.height / 2;
this.halfwidth = canvas.width / 2;
this.len = 0;
this.points = [];
return this;
}
// Добавляем точки
Shape.prototype.addPoint = function (x, y, z) {
this.points.push(
new Point(Math.round(x), Math.round(y), Math.round(z))
);
this.len++;
}
// Вращение формы
Shape.prototype.rotate = function () {
this.angle += Math.PI / 180; // смещение на 1 градус (радианы в одном градусе)
var ax = Math.cos(this.angle);
var ay = Math.sin(this.angle);

// Вращение всех точек и объектов формы
for (var i = 0; i < this.len; i++) {
this.points[i].rotate(ax, ay);
}
}
Shape.prototype.draw = function () {
// Точки проекции
for (var i = 0; i < this.len; i++) {
this.points[i].project();
}
// Рисуем кривую линию между точками
var p0 = this.points[0];

ctx.beginPath();
ctx.moveTo(p0.xp + this.halfwidth, p0.yp + this.halfheight);
for (var i = 1, pl = this.points.length; i < pl; i++) {
var apnt = this.points[i];
var xc = (p0.xp + apnt.xp) / 2;
var yc = (p0.yp + apnt.yp) / 2;
ctx.quadraticCurveTo(p0.xp + this.halfwidth, p0.yp + this.halfheight, xc + this.halfwidth, yc + this.halfheight);
p0 = apnt;
}

ctx.lineWidth = 8;
ctx.strokeStyle = this.color;
ctx.lineCap = 'round'; // округлые заглушки
ctx.stroke();
}

// Форма объекта

var Shape = function () {

this.angle = 0;

this.color = '#000';

this.halfheight = canvas.height / 2;

this.halfwidth = canvas.width / 2;

this.len = 0;

this.points = [];

return this;

}

// Добавляем точки

Shape.prototype.addPoint = function (x, y, z) {

this.points.push(

new Point(Math.round(x), Math.round(y), Math.round(z))

);

this.len++;

}

// Вращение формы

Shape.prototype.rotate = function () {

this.angle += Math.PI / 180; // смещение на 1 градус (радианы в одном градусе)

var ax = Math.cos(this.angle);

var ay = Math.sin(this.angle);

// Вращение всех точек и объектов формы

for (var i = 0; i < this.len; i++) {

this.points[i].rotate(ax, ay);

}

Shape.prototype.draw = function () {

// Точки проекции

for (var i = 0; i < this.len; i++) {

this.points[i].project();

}

// Рисуем кривую линию между точками

var p0 = this.points[0];

ctx.beginPath();

ctx.moveTo(p0.xp + this.halfwidth, p0.yp + this.halfheight);

for (var i = 1, pl = this.points.length; i < pl; i++) {

var apnt = this.points[i];

var xc = (p0.xp + apnt.xp) / 2;

var yc = (p0.yp + apnt.yp) / 2;

ctx.quadraticCurveTo(p0.xp + this.halfwidth, p0.yp + this.halfheight, xc + this.halfwidth, yc + this.halfheight);

p0 = apnt;

}

ctx.lineWidth = 8;

ctx.strokeStyle = this.color;

ctx.lineCap = 'round'; // округлые заглушки

ctx.stroke();

}

Она имеет меньше параметров, но больше функций (AddPoint, вращать и рисовать). Теперь мы можем приступить к добавлению нескольких основных функций сцены: главную сцену (canvas), инициализация (sceneInit), функция визуализации (DrawScene) и генератор случайных цветов (getRandomColor):

// Получаем случайный цвет
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}

// Рисуем основные функции сцены
function drawScene() {

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Очистить canvas

if (vPointer.bDown) {
var iDx = iLMx - vPointer.X;
var iDy = iLMy - vPointer.Y;
var dif = Math.sqrt(iDx * iDx + iDy * iDy); // Разница между двумя последними точками
if (dif > 5) {
if (! vActShape) {
aShapes.push( // подготовить новую форму объекта
vActShape = new Shape()
);
vActShape.color = getRandomColor();
}
iLMx = vPointer.X;
iLMy = vPointer.Y;
vActShape.addPoint(vPointer.X - canvas.width * 0.5, vPointer.Y - canvas.height * 0.5, 0);
}
} else {
// Как только мышь отпущена - Очистка
if (vActShape) {
vActShape = '';
iLMx = iLMy = 0;
}

// Вращение формы
aShapes.forEach(function(sh) {
sh.rotate();
});
}

// Рисуем всех форм
aShapes.forEach(function(sh) {
sh.draw();
});
}

// Инициализация
function sceneInit() {

// Подготовка холста и объектов контекста
canvas = document.getElementById('scene');

// Изменение размера холста
canvas.width = canvas.clientWidth;
canvas.height = window.innerHeight;

ctx = canvas.getContext('2d');

// Добавление двух пользовательских форм
var oShape = new Shape();
oShape.addPoint(-200,-200,50);
oShape.addPoint(0,0,0);
oShape.addPoint(-400,200,0);
oShape.addPoint(200,-400,-50);
aShapes.push(oShape);

var oShape2 = new Shape();
oShape2.addPoint(200,200,-50);
oShape2.addPoint(0,0,0);
oShape2.addPoint(400,-200,0);
oShape2.addPoint(-200,400,50);
aShapes.push(oShape2);

//Указатель мыши обработчик событий
vPointer = new CPointer(canvas);

// Цикл основной сцены
setInterval(drawScene, 20);
}

// Window OnLoad инициализации

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;
}
}

// Получаем случайный цвет

function getRandomColor() {

var letters = '0123456789ABCDEF'.split('');

var color = '#';

for (var i = 0; i < 6; i++ ) {

color += letters[Math.round(Math.random() * 15)];

}

return color;

}

// Рисуем основные функции сцены

function drawScene() {

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Очистить canvas

if (vPointer.bDown) {

var iDx = iLMx - vPointer.X;

var iDy = iLMy - vPointer.Y;

var dif = Math.sqrt(iDx * iDx + iDy * iDy); // Разница между двумя последними точками

if (dif > 5) {

if (! vActShape) {

aShapes.push( // подготовить новую форму объекта

vActShape = new Shape()

);

vActShape.color = getRandomColor();

}

iLMx = vPointer.X;

iLMy = vPointer.Y;

vActShape.addPoint(vPointer.X - canvas.width * 0.5, vPointer.Y - canvas.height * 0.5, 0);

}

} else {

// Как только мышь отпущена - Очистка

if (vActShape) {

vActShape = '';

iLMx = iLMy = 0;

}

// Вращение формы

aShapes.forEach(function(sh) {

sh.rotate();

});

}

// Рисуем всех форм

aShapes.forEach(function(sh) {

sh.draw();

});

}

// Инициализация

function sceneInit() {

// Подготовка холста и объектов контекста

canvas = document.getElementById('scene');

// Изменение размера холста

canvas.width = canvas.clientWidth;

canvas.height = window.innerHeight;

ctx = canvas.getContext('2d');

// Добавление двух пользовательских форм

var oShape = new Shape();

oShape.addPoint(-200,-200,50);

oShape.addPoint(0,0,0);

oShape.addPoint(-400,200,0);

oShape.addPoint(200,-400,-50);

aShapes.push(oShape);

var oShape2 = new Shape();

oShape2.addPoint(200,200,-50);

oShape2.addPoint(0,0,0);

oShape2.addPoint(400,-200,0);

oShape2.addPoint(-200,400,50);

aShapes.push(oShape2);

//Указатель мыши обработчик событий

vPointer = new CPointer(canvas);

// Цикл основной сцены

setInterval(drawScene, 20);

}

// Window OnLoad инициализации

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 мы добавили две формы. Как вы уже заметили, для того, чтобы справиться с событиями мыши мы используем экземпляр класса CPointer. Вот он:

JS / pointer.js

CPointer = function (canvas) {
var self = this;
this.body = document.body;
this.html = document.documentElement;
this.elem = canvas;
this.X = 0;
this.Y = 0;
this.Xi = 0;
this.Yi = 0;
this.Xr = 0;
this.Yr = 0;
this.startX = 0;
this.startY = 0;
this.bDrag = false;
this.bMoved = false;
this.bDown = false;
this.bXi = 0;
this.bYi = 0;
this.sX = 0;
this.sY = 0;
this.left = canvas.offsetLeft;
this.top = canvas.offsetTop;

self.elem.onmousedown = function (e) {
self.bDrag = false;
self.bMoved = false;
self.bDown = true;
self.Xr = e.clientX;
self.Yr = e.clientY;

self.X = self.sX = self.Xr - self.left;
self.Y = self.sY = self.Yr - self.top + ((self.html && self.html.scrollTop) || self.body.scrollTop);
}
self.elem.onmousemove = function(e) {
self.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
self.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
self.X = self.Xr - self.left;
self.Y = self.Yr - self.top + ((self.html && self.html.scrollTop) || self.body.scrollTop);
if (self.bDown) {
self.Xi = self.bXi + (self.X - self.sX);
self.Yi = self.bYi - (self.Y - self.sY);
}
if (Math.abs(self.X - self.sX) > 2 || Math.abs(self.Y - self.sY) > 2) {
self.bMoved = true;
if (self.bDown) {
if (! self.bDrag) {
self.startX = self.sX;
self.startY = self.sY;
self.bDrag = true;
}
} else {
self.sX = self.X;
self.sY = self.Y;
}
}
}
self.elem.onmouseup = function() {
self.bXi = self.Xi;
self.bYi = self.Yi;
if (! self.bMoved) {
self.X = self.sX;
self.Y = self.sY;
}
self.bDrag = false;
self.bDown = false;
self.bMoved = false;
}
}

CPointer = function (canvas) {

var self = this;

this.body = document.body;

this.html = document.documentElement;

this.elem = canvas;

this.X = 0;

this.Y = 0;

this.Xi = 0;

this.Yi = 0;

this.Xr = 0;

this.Yr = 0;

this.startX = 0;

this.startY = 0;

this.bDrag = false;

this.bMoved = false;

this.bDown = false;

this.bXi = 0;

this.bYi = 0;

this.sX = 0;

this.sY = 0;

this.left = canvas.offsetLeft;

this.top = canvas.offsetTop;

self.elem.onmousedown = function (e) {

self.bDrag = false;

self.bMoved = false;

self.bDown = true;

self.Xr = e.clientX;

self.Yr = e.clientY;

self.X = self.sX = self.Xr - self.left;

self.Y = self.sY = self.Yr - self.top + ((self.html && self.html.scrollTop) || self.body.scrollTop);

}

self.elem.onmousemove = function(e) {

self.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);

self.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);

self.X = self.Xr - self.left;

self.Y = self.Yr - self.top + ((self.html && self.html.scrollTop) || self.body.scrollTop);

if (self.bDown) {

self.Xi = self.bXi + (self.X - self.sX);

self.Yi = self.bYi - (self.Y - self.sY);

}

if (Math.abs(self.X - self.sX) > 2 || Math.abs(self.Y - self.sY) > 2) {

self.bMoved = true;

if (self.bDown) {

if (! self.bDrag) {

self.startX = self.sX;

self.startY = self.sY;

self.bDrag = true;

}

} else {

self.sX = self.X;

self.sY = self.Y;

}

self.elem.onmouseup = function() {

self.bXi = self.Xi;

self.bYi = self.Yi;

if (! self.bMoved) {

self.X = self.sX;

self.Y = self.sY;

}

self.bDrag = false;

self.bDown = false;

self.bMoved = false;

}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Создаем простую панель для рисования 3D

Шаг 1. HTML

Шаг 2. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Создаем простую панель для рисования 3D

Шаг 1. HTML

Шаг 2. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи