zk-draw/comm/comm.js

canvas绘制AI数据的一个工具类

/*
 * @Author: wangfpp 
 * @Date: 2020-04-27 18:34:59 
 * @Last Modified by: wangfpp
 * @Last Modified time: 2020-06-05 18:00:34
 */
// 复制ctx的全部属性
const copyCtxConf = ctx => {
    let obj = {};
    for(let key in ctx) {
        let config = ctx[key];
        if (typeof config == 'function') {
            continue
        }
        if (key === 'canvas') {
            let canvas = {
                offsetWidth: config.offsetWidth,
                offsetHeight: config.offsetHeight
            }
            obj['canvas'] = canvas;
        } else {
            obj[key] = config
        }
    }
    return obj;
}

/**
 * 
 * @param {Array} points 框体坐标
 * @param {Number} xkp 
 * @param {Number} ykp 
 */
const getXyWh = (points, xkp, ykp) => { // 获取框的起点和宽高
    let arr = kpArr(points, xkp, ykp);
    let width = arr[2] - arr[0];
    let height = arr[3] - arr[1];
    let x = arr[2] - arr[0];
    let y = arr[3] - arr[1];
    let x1 = arr[0] + x/2; // 对角线中心点也是圆心
    let y1 = arr[1] + y/2;
    let cc = [x1, y1]; // 圆心
    let r = Math.sqrt(((x1 - arr[0]) * (x1 - arr[0]))  + ((y1 - arr[1]) * (y1 - arr[1])))
    // console.log(x, y, r, cc);
    return {kparr: arr, x: arr[0], y: arr[1], width: width, height: height, r: r, cc: cc};
}


/**
 * @description 缩放坐标
 * @param {Array} points 
 * @param {Number} xkp 
 * @param {Number} ykp 
 */
const kpArr = (points, xkp, ykp) => {
    let arr = []
    points.forEach((item, index) => {
        if (index % 2 === 0) {
            arr.push(item * xkp)
        } else {
            arr.push(item * ykp)
        }
    });
    return arr;
}

/**
 * @description 数组扁平化
 * @param {Array} arr 
 */
const deepFlatten = arr => {
    return [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)))
}

/**
 * @description 颜色转化为rgba格式4通道透明
 * @param {Number} alpha 
 */
const colorRgb = function(alpha) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = this.toLowerCase();
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return alpha ? `RGB(${sColorChange.join(",")}, ${alpha})` : "RGB(" + sColorChange.join(",") + ")";
    } else {
        return alpha ? `RGBA${sColor.split(')') +  alpha})` : "RGB" + sColor;
    }
};


/**
 * 简单的数组拷贝功能
 * @param  {Object} o [待拷贝的对象]
 * @return {Object}   [拷贝后的对象]
 */
const deepCopy = (o) => {
    if (o instanceof Array) {
        var n = [];
        for (var i = 0; i < o.length; ++i) {
            n[i] = deepCopy(o[i]);
        }
        return n;

    } else if (o instanceof Object) {
        var n = {}
        for (var i in o) {
            n[i] = deepCopy(o[i]);
        }
        return n;
    } else {
        return o;
    }            
}

/**
 * 分割数组
 * @param  {Number} N [按几个分割]
 * @param  {Array} Q [待分隔的数组]
 * @return {[type]}   [description]
 */
const splitArr = (N, Q) => {
    var R = [];
    for(var i = 0; i < Q.length;) {
        R.push(Q.slice(i, i += N));
    }
    return R;
}

const getNodeById = (node) => {
    if (node.nodeType && node.nodeType === 1) {
		return node;
	} else {
		if (node.startsWith('#')) {
			let nodeDom = document.querySelector(node);
			return nodeDom;
		} else {
			let nodeDom = document.querySelector(`#${node}`);
			return nodeDom;
		}
	}
}

export   { copyCtxConf,  getXyWh, kpArr, deepFlatten, colorRgb, deepCopy, splitArr, getNodeById };