Canvas-credit-score

面向现代主流浏览器实现的 Canvas 绘制的一个类似支付宝信用分的组件

• 支持高清绘制(走像素比，然后缩放)
• 文字等分的传入
• 虚线等分的传入
• 线条大小，颜色
• 文字的色彩及大小

默认分数段是 450-850，角度 42 等分,文字 5 等分。。。

没那么严谨的各种判断，只是为了满足业务需求写的，有兴趣完善的可以提交 PR

安装

// yarn add canvas-credit-score
npm install --save canvas-credit-score

用法

// 引入
import CreditScore from 'canvas-credit-score';

// 初始化
let cs = new CreditScore(el: '',{/*options*/});

cs.drawBaseMap(); // 执行绘制

// 也可以调用init函数来设置配置，再执行绘制
let cs2 = new CreditScore(el);
cs2.init(configObject);
cs2.drawBaseMap(); // 执行绘制

选项

• 参数(直接拿typescript的描述了哈)

interface defaultParams {
  x: number; // 圆心的x坐标
  y: number; // 圆心的y坐标
  startAngle: number; // 开始的角度
  endAngle: number; // 结束的角度
  currentAngle: number; // 当前的角度
  scoreStart: number; // 起步分
  scoreTarget: number; // 目标分
  scoreMin: number; // 最低分
  scoreMax: number; // 最高分
  scoreEvaDate: string; // 评估日期
  segAngle: number; // 总角度分成几等分
  outerTextSeg: number; // 外围文本分成几份
  style: styleParams; // 样式
}

interface styleParams {
  line?: {
    initColor?: string, // 初始化颜色
    activeColor?: string, // 高亮的颜色
    width?: number // 线条的粗细
  };
  dashLine?: {
    initColor?: string, // 初始化颜色
    activeColor?: string, // 高亮的颜色
    width?: number // 线条的粗细
  };
  outerText?: {
    // 外环文本
    fontSize?: number,
    color?: string
  };
  innerText?: {
    score?: {
      fontSize?: number,
      color?: string
    },
    level?: {
      fontSize?: number,
      color?: string
    },
    date?: {
      fontSize?: number,
      color?: string,
      fontWeight?: string
    }
  };
}

• 方法
• instance.drawBaseMap() - 读取配置后绘制图形
• instance.init() - 配置参数，可选。也可以在构造函数传入
• instance.refresh(delay,callback) - 延迟多少秒后再次渲染，支持回调函数的传入

License

The MIT License (MIT). Please see License File for more information.