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