本文介绍一些常用的工具类
1.验证码
如下图,一般的后台管理系统都会在登录的时候设计一个验证码,这个验证码是前端生成的,点击canvas可以切换验证码。二维码的类型是数字或者字母自己可以根据需要设置,
1.验证码的js
如下图,首先引入验证码的js
verifyCode的代码如下,自己根据需要修改长宽(_init方法中的宽和高),验证码的类型,颜色,干扰线等。
function GVerify (options) { // 创建一个图形验证码对象,接收options对象为参数
this.options = { // 默认options参数值
id: '', // 容器Id
canvasId: 'verifyCanvas', // canvas的ID
width: '100', // 默认canvas宽度
height: '38', // 默认canvas高度
type: 'number', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
code: ''
}
if (Object.prototype.toString.call(options) === '[object Object]') { // 判断传入参数类型
for (var i in options) { // 根据传入的参数,修改默认参数值
this.options[i] = options[i]
}
} else {
this.options.id = options
}
this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')
this.options.letterArr = getAllLetter()
this._init()
this.refresh()
}
GVerify.prototype = {
/** 版本号**/
version: '1.0.0',
/** 初始化方法**/
_init: function () {
var con = document.getElementById(this.options.id)
var canvas = document.createElement('canvas')
// this.options.width = con.offsetWidth > 0 ? con.offsetWidth : '30'
// this.options.height = con.offsetHeight > 0 ? con.offsetHeight : '30'
this.options.width = '100'
this.options.height = '38'
canvas.id = this.options.canvasId
canvas.width = this.options.width
canvas.height = this.options.height
canvas.style.cursor = 'pointer'
canvas.innerHTML = '您的浏览器版本不支持canvas'
con.appendChild(canvas)
var parent = this
canvas.onclick = function () {
parent.refresh()
}
},
/** 生成验证码**/
refresh: function () {
this.options.code = '';
var canvas = document.getElementById(this.options.canvasId)
if (canvas.getContext) {
var ctx = canvas.getContext('2d')
}
ctx.textBaseline = 'middle'
ctx.fillStyle = randomColor(180, 240)
ctx.fillRect(0, 0, this.options.width, this.options.height)
let txtArr = '';
if (this.options.type === 'blend') { // 判断验证码类型
txtArr = this.options.numArr.concat(this.options.letterArr)
} else if (this.options.type === 'number') {
txtArr = this.options.numArr
} else {
txtArr = this.options.letterArr
}
for (var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)]
this.options.code += txt
ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 随机生成字体大小
ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
ctx.shadowOffsetX = randomNum(-3, 3)
ctx.shadowOffsetY = randomNum(-3, 3)
ctx.shadowBlur = randomNum(-3, 3)
ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
var x = this.options.width / 5 * i
var y = this.options.height / 2
var deg = randomNum(-30, 30)
/** 设置旋转角度和坐标原点**/
ctx.translate(x, y)
ctx.rotate(deg * Math.PI / 180)
ctx.fillText(txt, 0, 0)
/** 恢复旋转角度和坐标原点**/
ctx.rotate(-deg * Math.PI / 180)
ctx.translate(-x, -y)
}
/** 绘制干扰线**/
for (let i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180)
ctx.beginPath()
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
ctx.stroke()
}
/** 绘制干扰点**/
for (let i = 0; i < this.options.width / 4; i++) {
ctx.fillStyle = randomColor(0, 255)
ctx.beginPath()
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
ctx.fill()
}
},
/** 验证验证码**/
validate: function (code) {
code = code.toLowerCase()
var v_code = this.options.code.toLowerCase()
if (code == v_code) {
return true
} else {
return false
}
}
}
/ 生成字母数组/
function getAllLetter () {
var letterStr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'
return letterStr.split(',')
}
/ 生成一个随机数/
function randomNum (min, max) {
return Math.floor(Math.random() * (max - min) + min)
}
/ 生成一个随机色/
function randomColor (min, max) {
var r = randomNum(min, max)
var g = randomNum(min, max)
var b = randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
}
export {
GVerify
}
复制代码
2.登录页面
引用工具类
import { GVerify } from '@/assets/js/verifyCode.js';
复制代码
验证码的canvas代码
{{codeMsg}}
复制代码
验证码的验证规则
const validateCode = (rule, value, callback) => {
let verifyFlag = this.verifyCode.validate(value);
if (!verifyFlag) {
callback(new Error('验证码输入错误'));
} else {
callback()
}
};
复制代码
验证码的校验规则
loginRules: {
verifyCode: [
{ required: true, message: '验证码不能为空'},
{ validator: validateCode, trigger: 'change'}
]
复制代码
二:根据一组坐标返回中心点的数组[纬度,纬度]
主要用于地图根据一组坐标点,计算中心点,打开地图时候,点在地图中间
/**
- 根据一组坐标返回中心点的数组[纬度,纬度]
- @param points
- @returns {number[]}
*/
export function getPointsCenter(points) {
var point_num = points.length; // 坐标点个数
var X = 0, Y = 0, Z = 0;
for(let i = 0; i < points.length; i++) {
if (points[i] == '') {
continue;
}
var lat, lng, x, y, z;
lat = parseFloat(points[i].latitude) * Math.PI / 180;
lng = parseFloat(points[i].longitude) * Math.PI / 180;
x = Math.cos(lat) * Math.cos(lng);
y = Math.cos(lat) * Math.sin(lng);
z = Math.sin(lat);
X += x;
Y += y;
Z += z;
}
X = X / point_num;
Y = Y / point_num;
Z = Z / point_num;
var tmp_lng = Math.atan2(Y, X);
var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
return [tmp_lat * 180 / Math.PI, tmp_lng * 180 / Math.PI];
}
复制代码
三: 根据原始数据计算缩放级别
主要是根据一组坐标点,计算地图缩放的级别,从而使得所有的坐标可以都展示在可视的区域内。
/**
- 根据原始数据计算缩放级别
- @param points
*/
export function getZoom(points){
if(points.length > 0){
let maxLng = points[0].longitude;
let minLng = points[0].longitude;
let maxLat = points[0].latitude;
let minLat = points[0].latitude;
let res;
for (let i = points.length - 1; i >= 0; i--) {
res = points[i];
if(res.longitude > maxLng) maxLng = res.longitude;
if(res.longitude < minLng) minLng = res.longitude;
if(res.latitude > maxLat) maxLat = res.latitude;
if(res.latitude < minLat) minLat = res.latitude;
}
let zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"];// 级别18到3。
let pointA = new window.TMap.LatLng(maxLat, maxLng); // 创建点坐标A
let pointB = new window.TMap.LatLng(minLat, minLng); // 创建点坐标B
let distance = window.TMap.geometry.computeDistance([pointA, pointB]).toFixed(1); // 获取两点距离,保留小数点后两位
for (let i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
if(zoom[i] - distance > 0){
return 18-i+3;// 之所以会多3,是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
}
}
复制代码
以上就是最近用到的工具类了,希望对你有帮助哦,记录一下,温故而知新!!!
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKe...不胜感激 !