zk-draw/package/draw_line/draw_line.js

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

/*
 * @description 绘制直线的函数
 * @Author: wangfpp 
 * @Date: 2020-04-28 11:45:17 
 * @Last Modified by: wangfpp
 * @Last Modified time: 2020-04-28 11:51:35
 */

import { copyCtxConf, kpArr } from "../../comm/comm";

/**
 * @description 绘制直线的函数
 * @param {Canvas 2D} ctx 
 * @param {Array} start 开始点坐标
 * @param {Array} end 结束点坐标
 * @param {Object} option {xkp: 1, ykp: 1}
 */
const drawLine = (ctx, start, end, option) =>{
    const ctxConfig = copyCtxConf(ctx);
    const defaultConfig = {xkp: 1, ykp: 1};
    let reactConfig = Object.assign(ctxConfig, defaultConfig, option),
    { strokeStyle,  lineWidth, lineJoin, lineCap, xkp, ykp } = reactConfig,
    copyArrStart = kpArr(start, xkp, ykp),
    copyArrEnd = kpArr(end, xkp, ykp);

    // 绘制函数主体
    ctx.beginPath();
    ctx.lineCap = lineCap;
    ctx.lineJoin = lineJoin;
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeStyle;
    ctx.moveTo(copyArrStart[0], copyArrStart[1]);
    ctx.lineTo(copyArrEnd[0], copyArrEnd[1]);
    ctx.stroke();
    ctx.closePath();
}

export { drawLine };