canvas画两个相交的圆（React）

需求：展示两个模块及交集，以两个圆相交的方式，如下图：

一开始画，总会一个圆压住另一个圆，最后看到了paper.js，就可以了，好用，center是圆心，第一个值是X轴坐标，第二个值是Y轴坐标；radius是半径；fillColor是填充色。一看代码就能看懂啦~

哈哈哈，记录一下。

组件canvasBox.js

import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import paper from 'paper';
import './style.less';

const CanvasBox = props => {
  const {
    canvasData: {
      aClueSource, aMedia, clueNumA, independentNumA,
      bClueSource, bMedia, clueNumB, independentNumB,
      pNum,
    },
  } = props;

  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    paper.setup(canvas);
    // 创建两个圆
    const circle1 = new paper.Path.Circle({
      center: [196, 200],
      radius: 174,
      fillColor: '#81d3f8',
    });

    const circle2 = new paper.Path.Circle({
      center: [396, 200],
      radius: 184,
      fillColor: '#80ffff',
    });
    // 检测相交
    const intersection = circle1.intersect(circle2);
    if (intersection) {
      intersection.fillColor = '#c280ff';
    } else {
      console.log('Circles do not intersect');
    }
    return () => {
      // Clean up Paper.js environment if component unmounts
      paper.project.clear();
    };
  }, []);

  return (
    <div className="h-canvas-box">

      // 以绝对定位的方式，固定在两圆相交的部分
      <div className="hcb-label">重复号码量：{pNum}</div>

      // 左边部分
      <div className="hcb-a-div">
        <div style={{ fontWeight: 600 }}>{aClueSource}-{aMedia}</div>
        <div>线索量：{clueNumA}</div>
        <div>电话号码量：{independentNumA}</div>
      </div>

      // 两个相交圆部分
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />

      // 右边部分
      <div className="hcb-b-div">
        <div style={{ fontWeight: 600 }}>{bClueSource}-{bMedia}</div>
        <div>线索量：{clueNumB}</div>
        <div>电话号码量：{independentNumB}</div>
      </div>
    </div>
  );
};

CanvasBox.propTypes = {
  canvasData: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

export default React.memo(CanvasBox);

组件style.less

 .h-canvas-box{
    position: relative;
    height: 400px;
    position: relative;

    .hcb-a-div{
      position: absolute;
      top: 45%;
      left: -200px;
      width: 200px;
      display: inline-block;
      text-align: right;
    }

    .hcb-label{
      position: absolute;
      top: 48%;
      left: 240px;
      color: #fff;
      z-index: 99;
    }

    .hcb-b-div{
      position: absolute;
      width: 200px;
      top: 45%;
      left: 600px;
      display: inline-block;
      text-align: left;
    }

  }

使用:

import CanvasBox from '../components/canvasBox';

<CanvasBox
    canvasData={{
        aClueSource: '',
        aMedia: '',
        clueNumA: '',
        independentNumA: '',
        bClueSource: '',
        bMedia: '',
        clueNumB: '',
        independentNumB: '',
        pNum: '',
    }}
/>