zk-draw/package/clear_canvas/clear_canvas.js

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

/*
 * @Author: wangfpp 
 * @Date: 2020-04-29 18:20:59 
 * @Last Modified by: wangfpp
 * @Last Modified time: 2020-07-02 10:49:37
 */

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


/**
 * @description 清空一个矩形区域
 * @param {Canvas 2d} ctx 
 * @param {Number} x 清除的起点x
 * @param {Number} y 清除的起点x
 * @param {Number} width 清除的宽度
 * @param {Number} height  清除的高度
 * @param {Object} option {xkp: 1, ykp: 1}　配置参数
 */
 const clearReact = (ctx, x, y, width, height, option) => {
    let ctxConfig = copyCtxConf(ctx),
    { offsetWidth, offsetHeight } = ctxConfig.canvas,
    defaultConfig = { xkp: 1, ykp: 1, width: offsetWidth, height: offsetHeight},
    drawOption = Object.assign(ctxConfig, defaultConfig, option);
    let { xkp, ykp } = drawOption;
    x = x * xkp;
    y = y * ykp;
    if (width === 0 && height === 0) {
        return 
    } else {
        width = width * xkp;
        height = height * ykp
    }
    ctx.clearRect(x, y, width,height);
 }


 /**
  * @description 清空整个画布
  * @param {Canvas 2D} ctx 
  */
 const clearCanvas = (ctx) => {
    let ctxConfig = copyCtxConf(ctx),
    { offsetWidth, offsetHeight } = ctxConfig.canvas;
    ctx.clearRect(0, 0, offsetWidth, offsetHeight);
 }

 /**
  * @description 根据矩形区域清空一个圆形区
  * @param {Canvas 2D} ctx 
  * @param {Array} points 
  * @param {Object} option 
  */
 const clearArcWithReact = (ctx, points, option) => {
    const ctxConfig = copyCtxConf(ctx);
    const defaultConfig = {xkp: 1, ykp: 1 };
    let reactConfig = Object.assign(ctxConfig, defaultConfig, option),
    { xkp, ykp} = reactConfig,
    { r, cc}= getXyWh(points, xkp, ykp);
    clearArc(ctx, cc[0], cc[1], r);
 }

 const clearArc = (ctx, x,y,radius) =>{
    var stepClear=1;//别忘记这一步 
    var calcWidth=radius-stepClear;  
    var calcHeight=Math.sqrt(radius*radius-calcWidth*calcWidth);  

    var posX=x-calcWidth;  
    var posY=y-calcHeight;  
                    
    var widthX=2*calcWidth;  
    var heightY=2*calcHeight;  
                    
    if(stepClear<=radius){  
        ctx.clearRect(posX,posY,widthX,heightY);  
       stepClear+=1;  
       clearArc(x,y,radius);  
    }  
  } 

 export { clearReact, clearCanvas, clearArcWithReact };