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

一开始画，总会一个圆压住另一个圆，最后看到了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 unmountspaper.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';<CanvasBoxcanvasData={{aClueSource: '',aMedia: '',clueNumA: '',independentNumA: '',bClueSource: '',bMedia: '',clueNumB: '',independentNumB: '',pNum: '',}}
/>