all files / src/Draw/ index.js

0% Statements 0/38
0% Branches 0/16
0% Functions 0/5
0% Lines 0/36
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67                                                                                                                                     
// 简单绘图库
 
// 开始画
export function createDraw(dom,width,height){
  let c = document.getElementById(dom)
  c.width = width
  c.height = height
  return c.getContext("2d")
}
// 添加文字
export function drawText(ctx,x,y,text = '一段文字',size = 35,align = 'left',fill = '#000',family  = "微软雅黑"){
  ctx.save();
  ctx.font = size + 'px '+ family
  ctx.textAlign = align
  ctx.fillStyle = fill
  ctx.fillText(text,x,y)
  ctx.restore();
}
// 圆矩(填充)
export function drawRoundRect(ctx, x, y, width, height, radius,fillColor = '#000') {
  //圆的直径必然要小于矩形的宽高
  if (2 * radius > width || 2 * radius > height) return false;
  ctx.save();
  ctx.translate(x, y);
  //绘制圆角矩形的各个边
  getRectPath(ctx, width, height, radius);
  ctx.fillStyle = fillColor;
  ctx.fill();
  ctx.restore();
}
 
// 圆矩(边框)
export function drawRoundRectBorder(cxt, x, y, width, height, radius,lineWidth =2, strokeColor ='#000') {
  //圆的直径必然要小于矩形的宽高
  if (2 * radius > width || 2 * radius > height) { return false; }
  cxt.save();
  cxt.translate(x, y);
  //绘制圆角矩形的各个边
  getRectPath(cxt, width, height, radius);
  cxt.lineWidth = lineWidth;
  cxt.strokeStyle = strokeColor;
  cxt.stroke();
  cxt.restore();
}
 
function getRectPath(ctx, width, height, radius) {
  ctx.beginPath(0);
  //从右下角顺时针绘制,弧度从0到1/2PI
  ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
  //矩形下边线
  ctx.lineTo(radius, height);
  //左下角圆弧,弧度从1/2PI到PI
  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
  //矩形左边线
  ctx.lineTo(0, radius);
  //左上角圆弧,弧度从PI到3/2PI
  ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
  //上边线
  ctx.lineTo(width - radius, 0);
  //右上角圆弧
  ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
  //右边线
  ctx.lineTo(width, height - radius);
  ctx.closePath();
  ctx.restore();
}