"use strict"; const ruler_metrics = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000, 10000, 25000, 50000, 100000]; const ruler_metrics_sub = [1,5,10, 50, 100]; var drawerRuler = function (options) { var api = this.builder(options); api.constructRulers.call(this, options); return { api: api, }; }; drawerRuler.prototype.builder = function (para) { var HORIZONTAL = 1, VERTICAL = 2, CUR_DELTA_X = 0, CUR_DELTA_Y = 0, CUR_SCALE = 1; var options, defaultOptions = { rulerHeight: 20, fontFamily: 'arial', fontSize: 9, strokeStyle: '#505050', orientation: HORIZONTAL, lineWidth: 1, enableMouseTracking: true, enableToolTip: true }; var theRulerDOM = document.getElementById(para.container); var ctx = theRulerDOM.getContext('2d'); var constructRulers = function (curOptions) { options = drawerRuler.prototype.utils.extend(defaultOptions, curOptions); }; var redraw = function (widthS, leftR, rightR) { var screenWidth = widthS*2; ctx.clearRect(0, 0, screenWidth, screenWidth); var _lower = leftR; var _upper = rightR; if(_upper == 0){ _upper = 1; } var pixels_per_unit = screenWidth / ((_upper - _lower)); // pixel per distance var _font_size = options.fontSize; var aheight = options.rulerHeight; // Figure out scale. Largest ticks must be far enough apart to fit largest text in vertical ruler. // We actually require twice the distance. var scale = Math.ceil(rightR); // Largest number var scale_text = "" + scale; var digits = scale_text.length + 1; // Add one for negative sign. if (Math.abs(rightR) < 10) { digits = 4; // 小数刻度 -0.10 } var miniPixels = digits * _font_size*2;// * 2; // Minimum pixels per 大刻度. var scale_index = 0; for (scale_index = 0; scale_index < ruler_metrics.length - 1; scale_index++) { var tick_size = ruler_metrics[scale_index]; if (Math.abs(pixels_per_unit) * tick_size > miniPixels) { break; } } // Now we find out what is the subdivide index for the closest ticks we can draw var divide_index = 0; for (divide_index = 0; divide_index < ruler_metrics_sub.length - 1; ++divide_index) { if (ruler_metrics[scale_index] * Math.abs(pixels_per_unit) < 5 * ruler_metrics_sub[divide_index + 1]) { break; } } // We'll loop over all ticks. // 每个刻度的像素数 var pixels_per_tick = pixels_per_unit * ruler_metrics[scale_index] / ruler_metrics_sub[divide_index]; // 每个刻度的实际坐标单位数 var units_per_tick = pixels_per_tick / pixels_per_unit; var ticks_per_unit = 1.0 / units_per_tick; // Find first and last ticks var start = 0; var end = 0; if (_lower < _upper) { start = Math.floor(_lower * ticks_per_unit); end = Math.ceil(_upper * ticks_per_unit); } else { start = Math.floor(_upper * ticks_per_unit); end = Math.ceil(_lower * ticks_per_unit); } // 绘制样式 ctx.strokeStyle = options.strokeStyle; ctx.font=options.fontSize*2 + 'px ' + options.fontFamily; ctx.lineWidth = 1;//options.lineWidth; ctx.save(); if(options.orientation == VERTICAL){ ctx.translate(0, screenWidth); ctx.rotate(-Math.PI/2); } ctx.beginPath(); var aperpendicular = options.fontSize; // Loop over all ticks for (var i = start; i < end+1; ++i) { // Position of tick (add 0.5 to center tick on pixel). var position = Math.floor(i*pixels_per_tick - _lower*pixels_per_unit) + 0.5; // Height of tick var size = aheight-7; for (var j = divide_index; j > 0; --j) { if (i%ruler_metrics_sub[j] == 0) break; size = size / 2 +1; } // Draw text for major ticks. if (i%ruler_metrics_sub[divide_index] == 0) { var label_value = Math.round(i * units_per_tick); var label = label_value.toString(); ctx.fillText(label, position + 1.5, aheight*2 - aperpendicular*2); } // Draw ticks // if (_orientation == Gtk::Orientation::HORIZONTAL) { ctx.moveTo(position, aheight*2 - size*2); //ctx.moveTo(position, 0); ctx.lineTo(position, aheight*2 ); // } else { // cr->move_to(awidth - size, position); // cr->line_to(awidth , position); // } } ctx.moveTo(0, aheight*2); ctx.lineTo(position, aheight*2); ctx.stroke(); ctx.restore(); }; var drawGuide = function (positionR) { }; return { redraw: redraw, drawGuide: drawGuide, constructRulers: constructRulers, }; }; drawerRuler.prototype.utils = { extend: function extend() { for (var i = 1; i < arguments.length; i++) for (var key in arguments[i]) if (arguments[i].hasOwnProperty(key)) arguments[0][key] = arguments[i][key]; return arguments[0]; }, pixelize: function (val) { return val + 'px'; }, prependChild: function (container, element) { return container.insertBefore(element, container.firstChild); }, };