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