You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
5.1 KiB
1 lines
5.1 KiB
{"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"]}]} |