{"remainingRequest":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\明允\\Desktop\\springboot\\vue\\src\\components\\Identify.vue?vue&type=style&index=0&id=08ba293c&scoped=true&lang=css","dependencies":[{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\src\\components\\Identify.vue","mtime":1689170964000},{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\css-loader\\dist\\cjs.js","mtime":1713785857195},{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1713785859014},{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\postcss-loader\\src\\index.js","mtime":1713785857859},{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1713785856543},{"path":"C:\\Users\\明允\\Desktop\\springboot\\vue\\node_modules\\vue-loader\\lib\\index.js","mtime":1713785858382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci5zLWNhbnZhcyB7CiAgaGVpZ2h0OiAzOHB4Owp9Ci5zLWNhbnZhcyBjYW52YXN7CiAgbWFyZ2luLXRvcDogMXB4OwogIG1hcmdpbi1sZWZ0OiA4cHg7Cn0K"},{"version":3,"sources":["Identify.vue"],"names":[],"mappings":";AAwJA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Identify.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div class=\"s-canvas\">\n    <canvas id=\"s-canvas\" :width=\"contentWidth\" :height=\"contentHeight\"></canvas>\n  </div>\n</template>\n<script>\nexport default {\n  name: 'Identify',\n  props: {\n    identifyCode: {\n      type: String,\n      default: '1234'\n    },\n    fontSizeMin: {\n      type: Number,\n      default: 28\n    },\n    fontSizeMax: {\n      type: Number,\n      default: 40\n    },\n    backgroundColorMin: {\n      type: Number,\n      default: 180\n    },\n    backgroundColorMax: {\n      type: Number,\n      default: 240\n    },\n    colorMin: {\n      type: Number,\n      default: 50\n    },\n    colorMax: {\n      type: Number,\n      default: 160\n    },\n    lineColorMin: {\n      type: Number,\n      default: 40\n    },\n    lineColorMax: {\n      type: Number,\n      default: 180\n    },\n    dotColorMin: {\n      type: Number,\n      default: 0\n    },\n    dotColorMax: {\n      type: Number,\n      default: 255\n    },\n    contentWidth: {\n      type: Number,\n      default: 112\n    },\n    contentHeight: {\n      type: Number,\n      default: 40\n    }\n  },\n  methods: {\n    // 生成一个随机数\n    randomNum (min, max) {\n      return Math.floor(Math.random() * (max - min) + min)\n    },\n    // 生成一个随机的颜色\n    randomColor (min, max) {\n      var r = this.randomNum(min, max)\n      var g = this.randomNum(min, max)\n      var b = this.randomNum(min, max)\n      return 'rgb(' + r + ',' + g + ',' + b + ')'\n    },\n    drawPic () {\n      var canvas = document.getElementById('s-canvas')\n      var ctx = canvas.getContext('2d')\n      ctx.textBaseline = 'bottom'\n      // 绘制背景\n      ctx.fillStyle = this.randomColor(\n          this.backgroundColorMin,\n          this.backgroundColorMax\n      )\n      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)\n      // 绘制文字\n      for (let i = 0; i < this.identifyCode.length; i++) {\n        this.drawText(ctx, this.identifyCode[i], i)\n      }\n      this.drawLine(ctx)\n      this.drawDot(ctx)\n    },\n    drawText (ctx, txt, i) {\n      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)\n      ctx.font =\n          this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'\n      var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))\n      var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)\n      var deg = this.randomNum(-30, 30)\n      // 修改坐标原点和旋转角度\n      ctx.translate(x, y)\n      ctx.rotate(deg * Math.PI / 270)\n      ctx.fillText(txt, 0, 0)\n      // 恢复坐标原点和旋转角度\n      ctx.rotate(-deg * Math.PI / 270)\n      ctx.translate(-x, -y)\n    },\n    drawLine (ctx) {\n      // 绘制干扰线\n      for (let i = 0; i < 2; i++) {\n        ctx.strokeStyle = this.randomColor(\n            this.lineColorMin,\n            this.lineColorMax\n        )\n        ctx.beginPath()\n        ctx.moveTo(\n            this.randomNum(0, this.contentWidth),\n            this.randomNum(0, this.contentHeight)\n        )\n        ctx.lineTo(\n            this.randomNum(0, this.contentWidth),\n            this.randomNum(0, this.contentHeight)\n        )\n        ctx.stroke()\n      }\n    },\n    drawDot (ctx) {\n      // 绘制干扰点\n      for (let i = 0; i < 20; i++) {\n        ctx.fillStyle = this.randomColor(0, 255)\n        ctx.beginPath()\n        ctx.arc(\n            this.randomNum(0, this.contentWidth),\n            this.randomNum(0, this.contentHeight),\n            1,\n            0,\n            2 * Math.PI\n        )\n        ctx.fill()\n      }\n    }\n  },\n  watch: {\n    identifyCode () {\n      this.drawPic()\n    }\n  },\n  mounted () {\n    this.drawPic()\n  }\n}\n</script>\n<style scoped>\n.s-canvas {\n  height: 38px;\n}\n.s-canvas canvas{\n  margin-top: 1px;\n  margin-left: 8px;\n}\n</style>\n"]}]}