zk-draw/package/draw_react/draw_react.js

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

/*
 * @Author: wangfpp 
 * @Date: 2020-04-27 17:16:44 
 * @Last Modified by: wangfpp
 * @Last Modified time: 2020-04-28 11:46:20
 */
// 绘制矩形框的函数
import { copyCtxConf, getXyWh } from '../../comm/comm.js'
import { drawText } from '../draw_text/draw_text.js';

/**
 * 
 * @param {Canvas 2D} ctx 
 * @param {Array} points [1, 2, 3, 4]左上右下两个点 
 * @param {Object} option 矩形框的配置 
 */

const drawReact = (ctx, points, option) => {
    const ctxConfig = copyCtxConf(ctx);
    const defaultConfig = {xkp: 1, ykp: 1};
    let reactConfig = Object.assign(ctxConfig, defaultConfig, option),
    { strokeStyle, fillStyle, textAlign,  font, lineWidth, lineJoin, lineCap, xkp, ykp, text  } = reactConfig,
    
    {kparr,  x, y, width, height } = getXyWh(points, xkp, ykp);
    ctx.beginPath();
    ctx.lineJoin = lineJoin;
    ctx.lineCap = lineCap;
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = lineWidth;
    // 这里判断是否绘制文本
    if (text) {
        ctx.fillStyle = fillStyle;
        ctx.font = font;
        ctx.textAlign = textAlign;
        let [ startx, starty ] = font_center_react(ctx, text,kparr);
        drawText(ctx, text, startx, starty);
    }
    ctx.strokeRect(x, y, width, height);
    ctx.closePath();
}

/**
 * @description 字在框体上横向居中显示
 * @param {Canvas} ctx 
 * @param {String} font 
 * @param {Array} react 
 */
const font_center_react = (ctx, font, react) =>{
    let font_length = ctx.measureText(font).width,
    react_width = (react[2] - react[0]);
    if (react_width > font_length) {
        return [react[0] + ((react_width - font_length) / 2), react[1] - 5]
    } else if (react_width < font_length) {
        return [react[0] - ((font_length - react_width) / 2), react[1] - 5]
    } else {
        return [react[0], react[1] - 5]
    }
}

/**
 * @description 绘制对角加粗的虚线框
 * @param {Canvas 2D} ctx 
 * @param {Array} points 
 * @param {Object} option 
 */
const drawReactArrow = (ctx, points, option) => { 
    const ctxConfig = copyCtxConf(ctx);
    const defaultConfig = {xkp: 1, ykp: 1};
    let reactConfig = Object.assign(ctxConfig, defaultConfig, option),
    { strokeStyle, fillStyle, textAlign,  font, xkp, ykp, text  } = reactConfig,
    {kparr,  x, y, width, height } = getXyWh(points, xkp, ykp);
    width = (kparr[2] - kparr[0]) * 0.25;
    // 第一个粗线
    ctx.beginPath();
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = 4;
    ctx.setLineDash([]); // 恢复实线状态
    ctx.moveTo(kparr[0], kparr[1]);
    ctx.lineTo(kparr[0] + width, kparr[1]);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = 1;
    //ctx.setLineDash([5, 5]); // 设置虚线
    ctx.moveTo(kparr[0] + width, kparr[1]);
    ctx.lineTo(kparr[2], kparr[1]);
    ctx.lineTo(kparr[2], kparr[3] - width);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = 4;
    ctx.setLineDash([]);
    ctx.moveTo(kparr[2], kparr[3] - width);
    ctx.lineTo(kparr[2], kparr[3]);
    ctx.lineTo(kparr[2] - width, kparr[3]);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = 1;
    //ctx.setLineDash([5, 5]);
    ctx.moveTo(kparr[2] - width, kparr[3]);
    ctx.lineTo(kparr[0], kparr[3]);
    ctx.lineTo(kparr[0], kparr[1] + width);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = strokeStyle;
    ctx.lineWidth = 4;
    ctx.setLineDash([]);
    ctx.moveTo(kparr[0], kparr[1] + width);
    ctx.lineTo(kparr[0], kparr[1]);
    ctx.stroke();
    ctx.closePath();

    // 这里判断是否绘制文本
    if (text) {
        ctx.fillStyle = fillStyle;
        ctx.font = font;
        ctx.textAlign = textAlign;
        let [ startx, starty ] = font_center_react(ctx, text,kparr);
        drawText(ctx, text, startx, starty);
    }
}


export { drawReact, drawReactArrow };