canvas绘制标尺

发布时间： 2019-02-19 16:38:39

/**
 * canvas 绘制标尺
 * 
 * params:{*}
 *      axisWidth:Number,轴线的宽度，单位px
 *      lineColor:String,轴线的颜色
 *      gridWidth:Number,大网格的宽度
 *      gridHeight:Number,大网格的高度
 * 
 * dom:Dom元素,canvas的元素
 */

function CanvasRuler(params, dom) {
   
  let AXIS_WIDTH = 1,
    LINE_COLOR = "#000000",
    GRID_WIDTH = 100,
    GRID_HEIGHT = 20;

  let canvas = dom;

  const DRAW_TYPE = {
   
    HORIZONTAL: 1,
    VERTICAL: 2,
    ALL: 3,
    NONE: 4
  };

  this.getDrawType = function() {
   
    return DRAW_TYPE;
  }

  this.setAxisWidth = function(axisWidth) {
   
    AXIS_WIDTH = Number(axisWidth) ? Number(axisWidth) : 1;
  }
  this.getAxisWidth = function() {
   
    return AXIS_WIDTH;
  }

  this.setLineColor = function(lineColor) {
   
    LINE_COLOR = lineColor;
  }
  this.getLineColor = function() {
   
    return LINE_COLOR;
  }

  this.setGridWidth = function(gridWidth) {
   
    GRID_WIDTH = Number(gridWidth) ? Number(gridWidth) : 1;
  }
  this.getGridWidth = function() {
   
    return GRID_WIDTH;
  }

  this.setGridHeight = function(gridHeight) {
   
    GRID_HEIGHT = Number(gridHeight) ? Number(gridHeight