var PowerControlWidget = function(settings){ this.container = settings.container || undefined ; this.canvas = document.createElement('CANVAS'); this.canvas.height = this.height; this.canvas.width = this.width; this.container.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); // --- this.set_value(0); this.redraw() }
var self = this; this.canvas.addEventListener("mousedown", function(event){ self.mouse_down = true; self.value = event.offsetX; if(event.offsetX < self.padding_left_right){ self.value = self.padding_left_right; } if(event.offsetX > self._line_width - self.padding_left_right){ self.value = self._line_width - self.padding_left_right; } self._percent_value = self._get_percent(self.value); self.redraw(); self.onchange(self._percent_value, self.progress_value); }) this.canvas.addEventListener("mouseup", function(event){ self.mouse_down = false; self._percent_value = self._get_percent(self.value); self.redraw(); self.onchange(self._percent_value, self.progress_value); }) this.canvas.addEventListener("mousemove", function(event){ if (self.mouse_down){ self.value = event.offsetX; if(event.offsetX < self.padding_left_right){ self.value = self.padding_left_right; } if(event.offsetX > self._line_width - self.padding_left_right){ self.value = self._line_width - self.padding_left_right; } self._percent_value = self._get_percent(self.value); self.redraw(); self.onslide(self._percent_value, self.progress_value); } })
this._draw_border = function(){ var b = this.padding_top_bottom; // . var a = this.padding_left_right; var w = this._line_width - ( 2 * a ); var h = this.height - (2*b); this.ctx.beginPath(); this.ctx.moveTo(a,b); this.ctx.bezierCurveTo(a+(w/2), b, w-(w/2)+a, b, a+w, b ); this.ctx.bezierCurveTo(a+w+a, b, a+a+w, b+h, a+w, b+h ); this.ctx.bezierCurveTo( w/2+a, b+h, w/2+a,b+h, a, b+h); this.ctx.bezierCurveTo( 0, b+h, 0,b, a,b); this.ctx.closePath(); this.ctx.strokeStyle = this.border_color; this.ctx.stroke(); // };
var zero = this._get_x(0); //
this.ctx.beginPath(); this.ctx.rect(0,0, zero, this.height); this.ctx.clip();
this.ctx.beginPath(); this.ctx.bezierCurveTo(a+(w/2), b, w-(w/2)+a, b, a+w, b ); this.ctx.bezierCurveTo(a+w+a, b, a+a+w, b+h, a+w, b+h ); this.ctx.bezierCurveTo( w/2+a, b+h, w/2+a,b+h, a, b+h); this.ctx.bezierCurveTo( 0, b+h, 0,b, a,b); this.ctx.fillStyle = this.below_z_color; this.ctx.fill(); this.ctx.closePath(); this.ctx.restore();
this._get_percent = function(x){ var a = this.padding_left_right; // var w = this._line_width - (2*a); // return ((x - a) * this._range/ w)+this.starting_percent ; // , , . }; this._get_x = function(p){ var a = this.padding_left_right; var w = this._line_width - (2*a); return a+ (p - this.starting_percent) * w / this._range; // };
var val = this._percent_value * 100 var int = Math.floor(val); var frac = Math.floor((val - int)*100);
var base_font_size = this.height - (this.padding_top_bottom*2) ; // var add_font_size = Math.floor(base_font_size / 2); // var base_marg = base_font_size *2; //
Well, in the end - the code for drawing text this.ctx.save() this.ctx.translate(this._line_width+ this.padding_top_bottom, this.height-this.padding_top_bottom); this.ctx.fillStyle = "#000"; this.ctx.font = base_font_size + "pt Arial"; this.ctx.textAlign = "end"; // this.ctx.fillText("" + (int), base_marg, 0 ) this.ctx.textAlign = "center"; this.ctx.font = (base_font_size -2) + "pt Arial"; this.ctx.fillText(",", base_marg+1,0 ) this.ctx.font = add_font_size + "pt Arial"; this.ctx.textAlign = "start"; // this.ctx.fillText("" + (frac), base_marg+3, 0 ) this.ctx.restore();
Source: https://habr.com/ru/post/224173/
All Articles