google/CanvasCycleVDP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize JS

Browse Source
This commit is contained in:
Georgy.Khatuncev 2024-09-21 02:28:53 +05:00
parent 06bb784400
commit bd4c9b8e67
2 changed files with 56 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
CanvasCycleVDP/PercentColumn.js
View File

@ -1,71 +1,60 @@
function PercentColumn(x, y, w, h) {
//Основной прямоугольник
function PercentColumn(x = 0, y = 0, w = 0, h = 0) {
// Основной прямоугольник
var rAll = new Rectangle(x, y, w, h);
//Прямоугольник процентов
// Прямоугольник процентов
var rPerc = new Rectangle();
/*Проценты поднимаются снизу вверх (false)
*или слева направо (true)*/
// Проценты поднимаются снизу вверх (false) или слева направо (true)
var rotate = false;
//Проценты статуса
// Проценты статуса
var percent = 0;
//Цвет
// Цвет
var color = '#000';
/*Функции для работы с координатами
* основного прямоугольника */
this.X = function (val) {
if (val === undefined) return rAll.X();
rAll.X(val);
};
this.Y = function (val) {
if (val === undefined) return rAll.Y();
rAll.Y(val);
};
this.W = function (val) {
if (val === undefined) return rAll.W();
rAll.W(val);
};
this.H = function (val) {
if (val === undefined) return rAll.H();
rAll.H(val);
};
//Установка процента от 0 до 100
this.Percent = function (val) {
// Геттеры и сеттеры для координат и размеров
this.X = (val) => (val === undefined ? rAll.X() : rAll.X(val));
this.Y = (val) => (val === undefined ? rAll.Y() : rAll.Y(val));
this.W = (val) => (val === undefined ? rAll.W() : rAll.W(val));
this.H = (val) => (val === undefined ? rAll.H() : rAll.H(val));
// Установка процента от 0 до 100
this.Percent = (val) => {
if (val === undefined) return percent;
var v = parseFloat(val);
v = (isNaN(v) || v < 0) ? 0 : (v > 100) ? 100 : v;
percent = v;
percent = Math.max(0, Math.min(100, parseFloat(val) || 0));
};
//Установка цвета в формате #****** или #***
this.Color = function (val) {
this.Color = (val) => {
if (val === undefined) return color;
var c = val.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
color = (c === null) ? '#000000' : c[0];
color = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(val) ? val : '#000000';
};
//Функция изменения начальной координаты и размеров прямоугольника
this.RectParam = function (_x, _y, _w, _h) {
this.RectParam = (_x, _y, _w, _h) => {
rAll.RectParam(_x, _y, _w, _h);
};
//Функция изменения прямоугольника по другому прямоугольнику
this.Rect = function (val) {
this.Rect = (val) => {
if (val === undefined) return rAll;
rAll.Rect(val);
};
//Изменение направления отрисовки процентов
this.Rotate = function (val) {
this.Rotate = (val) => {
if (val === undefined) return rotate;
rotate = (typeof val === 'boolean') ? val : false;
rotate = typeof val === 'boolean' ? val : false;
};
//Перерасчитываем элементы
function Rebuild() {
var size = ((!rotate) ? rAll.H() : rAll.W()) * percent / 100;
rPerc.RectParam(
rAll.X(),
(rotate) ? rAll.Y() : rAll.Y() + rAll.H() - size,
(!rotate) ? rAll.W() : size,
(rotate) ? rAll.H() : size
rotate ? rAll.Y() : rAll.Y() + rAll.H() - size,
rotate ? size : rAll.W(),
rotate ? rAll.H() : size
);
}
//Рисуем проценты
this.Print = function (ctx) {
Rebuild();
@ -74,6 +63,7 @@
ctx.fillRect(rPerc.X(), rPerc.Y(), rPerc.W(), rPerc.H());
ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
};
//Рисуем текст
this.PrintText = function (ctx) {
ctx.save();
@ -82,6 +72,7 @@
ctx.fillStyle = '#888';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
if (!rotate)
ctx.font = (rAll.W() - 10 < 0 ? 0 : rAll.W() - 10) + 'px Arial';
else

51
CanvasCycleVDP/Rectangle.js
View File

@ -1,46 +1,45 @@
//Объявление класса прямоугольника
function Rectangle(x, y, w, h) {
/*Функции для работы с координатами
* основного прямоугольника */
// Объявление класса прямоугольника
function Rectangle(x = 0, y = 0, w = 0, h = 0) {
// Функция для проверки и возврата корректного значения
function chkVal(val) {
var a = parseFloat(val);
return (isNaN(a) || a < 0) ? 0 : a;
}
return Math.max(0, parseFloat(val) || 0);
};
// Инициализация свойств
let _x = chkVal(x);
let _y = chkVal(y);
let _w = chkVal(w);
let _h = chkVal(h);
// Геттеры и сеттеры
this.X = function (val) {
if (val === undefined) return x;
x = chkVal(val);
if (val === undefined) return _x;
_x = chkVal(val);
};
this.Y = function (val) {
if (val === undefined) return y;
y = chkVal(val);
if (val === undefined) return _y;
_y = chkVal(val);
};
this.W = function (val) {
if (val === undefined) return w;
w = chkVal(val);
if (val === undefined) return _w;
_w = chkVal(val);
};
this.H = function (val) {
if (val === undefined) return h;
h = chkVal(val);
if (val === undefined) return _h;
_h = chkVal(val);
};
//Функция изменения начальной координаты и размеров прямоугольника
// Функция изменения параметров прямоугольника
this.RectParam = function (_x, _y, _w, _h) {
this.X(_x);
this.Y(_y);
this.W(_w);
this.H(_h);
};
//Функция изменения прямоугольника по другому прямоугольнику
this.Rect = function (val) {
if (val === undefined) return this;
this.RectParam(val.X(), val.Y(), val.W(), val.H());
};
//Первая инициализация
if (x === undefined) x = 0;
else this.X(x);
if (y === undefined) y = 0;
else this.Y(y);
if (w === undefined) w = 0;
else this.W(w);
if (h === undefined) h = 0;
else this.H(h);
}
}