93 lines
3.0 KiB
JavaScript
93 lines
3.0 KiB
JavaScript
|
function PercentColumn(x, y, w, h) {
|
|||
|
|
//Основной прямоугольник
|
|||
|
|
var rAll = new Rectangle(x, y, w, h);
|
|||
|
|
//Прямоугольник процентов
|
|||
|
|
var rPerc = new Rectangle();
|
|||
|
|
/*Проценты поднимаются снизу вверх (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) {
|
|||
|
|
if (val === undefined) return percent;
|
|||
|
|
var v = parseFloat(val);
|
|||
|
|
v = (isNaN(v) || v < 0) ? 0 : (v > 100) ? 100 : v;
|
|||
|
|
percent = v;
|
|||
|
|
};
|
|||
|
|
//Установка цвета в формате #****** или #***
|
|||
|
|
this.Color = function (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];
|
|||
|
|
};
|
|||
|
|
//Функция изменения начальной координаты и размеров прямоугольника
|
|||
|
|
this.RectParam = function (_x, _y, _w, _h) {
|
|||
|
|
rAll.RectParam(_x, _y, _w, _h);
|
|||
|
|
};
|
|||
|
|
//Функция изменения прямоугольника по другому прямоугольнику
|
|||
|
|
this.Rect = function (val) {
|
|||
|
|
if (val === undefined) return rAll;
|
|||
|
|
rAll.Rect(val);
|
|||
|
|
};
|
|||
|
|
//Изменение направления отрисовки процентов
|
|||
|
|
this.Rotate = function (val) {
|
|||
|
|
if (val === undefined) return rotate;
|
|||
|
|
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
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//Рисуем проценты
|
|||
|
|
this.Print = function (ctx) {
|
|||
|
|
Rebuild();
|
|||
|
|
ctx.fillStyle = color;
|
|||
|
|
ctx.strokeStyle = color;
|
|||
|
|
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();
|
|||
|
|
ctx.translate(rAll.X() + rAll.W() / 2, rAll.Y() + rAll.H() / 2);
|
|||
|
|
if (!rotate) ctx.rotate(3 * Math.PI / 2);
|
|||
|
|
ctx.fillStyle = '#888';
|
|||
|
|
ctx.textAlign = 'center';
|
|||
|
|
ctx.textBaseline = 'middle';
|
|||
|
|
if (!rotate)
|
|||
|
|
ctx.font = (rAll.W() - 10 < 0 ? 0 : rAll.W() - 10) + 'px Arial';
|
|||
|
|
else
|
|||
|
|
ctx.font = (rAll.H() - 10 < 0 ? 0 : rAll.H() - 10) + 'px Arial';
|
|||
|
|
ctx.fillText(Math.floor(percent * 100) / 100 + '%', 0, 0);
|
|||
|
|
ctx.restore();
|
|||
|
|
};
|
|||
|
|
}
|