svg 使用path实现圆角效果

效果图

代码实操 

1.  
   import React from 'react';
2.  
   import PropTypes from 'prop-types';
3.  
   import { iconMaker, triangleMaker } from '../utils';
4.  
    
5.  
   const Connection = ({ startPoint, radius, height, width, color }) => {
6.  
   const [sx, sy] = startPoint;
7.  
   // 上下右左, 矩形的四个点
8.  
   const point1 = [sx, sy];
9.  
   const point2 = [sx, sy height];
10.  
    const point3 = [sx width, sy height];
11.  
    const point4 = [sx width, sy];
12.  
     
13.  
    // 左边圆角的点坐标
14.  
    const cPoint1 = [sx, point2[1] - radius];
15.  
    const cPoint2 = point2;
16.  
    const cPoint3 = [sx radius, point2[1]];
17.  
     
18.  
    // 右边圆角的点坐标
19.  
    const cPoint4 = [point3[0] - radius, point3[1]];
20.  
    const cPoint5 = point3;
21.  
    const cPoint6 = [point3[0], point3[1] - radius];
22.  
     
23.  
    const centerPoint = [
24.  
    point2[0] width / 2,
25.  
    point2[1],
26.  
    point2[0] width / 2,
27.  
    point2[1] 20
28.  
    ];
29.  
     
30.  
    return (
31.  
    <g className="pane-node" style={{ stroke: '#4D9DED', strokeWidth: 2 }}>
32.  
    <path
33.  
    d={`M${cPoint1[0]} ${cPoint1[1]} C ${cPoint1[0]} ${cPoint1[1]}, ${cPoint2[0]} ${cPoint2[1]}, ${cPoint3[0]} ${cPoint3[1]} L ${cPoint4[0]} ${cPoint4[1]}`}
34.  
    fill="transparent"
35.  
    />
36.  
    <circle cx={point1[0]} cy={point1[1]} r="4" fill="#4D9DED" />
37.  
    <path d={`${triangleMaker(point4, 12)}`} fill="#4D9DED" />
38.  
    <path
39.  
    d={`M${cPoint4[0]} ${cPoint4[1]} C ${cPoint4[0]} ${cPoint4[1]}, ${cPoint5[0]} ${cPoint5[1]}, ${cPoint6[0]} ${cPoint6[1]}`}
40.  
    fill="transparent"
41.  
    />
42.  
    <line
43.  
    x1={point1[0]}
44.  
    y1={point1[1]}
45.  
    x2={cPoint1[0]}
46.  
    y2={cPoint1[1]}
47.  
    />
48.  
    <line
49.  
    x1={cPoint6[0]}
50.  
    y1={cPoint6[1]}
51.  
    x2={point4[0]}
52.  
    y2={point4[1]}
53.  
    />
54.  
    <line
55.  
    x1={centerPoint[0]}
56.  
    y1={centerPoint[1]}
57.  
    x2={centerPoint[2]}
58.  
    y2={centerPoint[3]}
59.  
    />
60.  
    {iconMaker([centerPoint[2], centerPoint[3]], 9)}
61.  
    </g>
62.  
    );
63.  
    };
64.  
     
65.  
    Connection.defaultProps = {
66.  
    startPoint: [130, 110],
67.  
    radius: 4,
68.  
    height: 20,
69.  
    width: 283,
70.  
    color: '#4D9DED'
71.  
    };
72.  
     
73.  
    Connection.propTypes = {
74.  
    height: PropTypes.number,
75.  
    radius: PropTypes.number,
76.  
    startPoint: PropTypes.array,
77.  
    width: PropTypes.number,
78.  
    color: PropTypes.string
79.  
    };
80.  
     
81.  
    export default Connection;

1.  
   export function triangleMaker(startPoint, len) {
2.  
   const [x, y] = startPoint;
3.  
   return `M${x},${y} L${x - len / 2},${y len / 2} L${x len / 2},${
4.  
   y len / 2
5.  
   } L${x},${y}`;
6.  
   }
7.  
    
8.  
   export function iconMaker(centerPoint, r, stopColor = ['#0073E6', '#66ABF0']) {
9.  
   const [x, y] = centerPoint;
10.  
    const textLen = Math.floor(r / 3);
11.  
    return (
12.  
    <g style={{ stroke: '#FFFFFF', strokeWidth: 1 }}>
13.  
    <defs>
14.  
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
15.  
    <stop
16.  
    offset="0%"
17.  
    style={{ stopColor: stopColor[0], stopOpacity: 1 }}
18.  
    />
19.  
    <stop
20.  
    offset="100%"
21.  
    style={{ stopColor: stopColor[1], stopOpacity: 1 }}
22.  
    />
23.  
    </linearGradient>
24.  
    </defs>
25.  
    <circle cx={x} cy={y} r={r} fill="url(#grad1)" />
26.  
    <line
27.  
    x1={x - textLen}
28.  
    y1={y - textLen}
29.  
    x2={x textLen}
30.  
    y2={y textLen}
31.  
    />
32.  
    <line
33.  
    x1={x textLen}
34.  
    y1={y - textLen}
35.  
    x2={x - textLen}
36.  
    y2={y textLen}
37.  
    />
38.  
    </g>
39.  
    );
40.  
    }

原理解析

c1、c2、c3是p2的贝塞尔曲线控制点

c4、c5、c6是p3的贝塞尔控制点

r为曲线半径 

这篇好文章是转载于：学新通技术网