export const CircleImage = (ctx, img, x, y, r) => {
  ctx.save()
  ctx.beginPath()
  ctx.arc(x + r, y + r, r, 0, 2 * Math.PI)
  ctx.clip()
  ctx.drawImage(img, x, y, 2 * r, 2 * r)
  ctx.restore()
}
export class Canvas {
  context: UniApp.CanvasContext
  size: { width: number; height: number }
  designSize: { width?: number; height?: number }
  constructor(
    ctx: UniApp.CanvasContext,
    size: { width: number; height: number },
    designSize: { width?: number; height?: number },
  ) {
    this.context = ctx
    this.size = size
    this.designSize = designSize
  }

  px(designPx) {
    return (this.size.width / this.designSize.width) * designPx
  }

  CircleImage(img, designX, designY, designR) {
    this.context.save()
    this.context.beginPath()
    this.context.arc(
      this.px(designX) + this.px(designR),
      this.px(designY) + this.px(designR),
      this.px(designR),
      0,
      2 * Math.PI,
    )
    this.context.clip()
    this.context.drawImage(
      img,
      this.px(designX),
      this.px(designY),
      2 * this.px(designR),
      2 * this.px(designR),
    )
    this.context.restore()
  }

  Image(img, designX, designY, designW, designH) {
    this.context.drawImage(
      img,
      this.px(designX),
      this.px(designY),
      this.px(designW),
      this.px(designH),
    )
  }

  FillImage(img) {
    this.context.drawImage(img, 0, 0, this.size.width, this.size.height)
  }

  FillText(text, color, designFontSize, designX, designY) {
    this.context.setFillStyle(color)
    this.context.setFontSize(this.px(designFontSize))
    this.context.fillText(text, this.px(designX), this.px(designY))
  }
}
