文字加描边的效果

效果如图:

image.png

代码如下:

import Svg, { Text } from "react-native-svg";
import { FontFamily } from "../../../constants";
import pTd from "../../../utils/PxTdt";

export const getTextWidth = (text, fontSize) => {
  const value = `${text ?? ""}`;
  let width = 0;

  value.split("").forEach((char) => {
    if (char === " ") {
      width += fontSize * 0.32;
    } else if (/[\u4e00-\u9fa5]/.test(char)) {
      width += fontSize;
    } else {
      width += fontSize * 0.58;
    }
  });

  return Math.ceil(width);
};

/**
 * 带描边的文本
 */
export default function StrokeText({
  text = "打卡可得",
  fill = "rgba(0,0,0,0.9)",
  stroke = "#FFFFFF",
  fontSize = 26,
  lineHeight = 34,
  strokeWidth = 4,
  style
}) {
  const width = getTextWidth(text, fontSize) + strokeWidth * 2;
  const height = lineHeight + strokeWidth * 2;
  const x = strokeWidth;
  const y = strokeWidth + fontSize;

  return (
    <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={style}>
      <Text
        x={x}
        y={y}
        fill="none"
        stroke={stroke}
        strokeLinejoin="round"
        strokeLinecap="round"
        strokeWidth={strokeWidth}
        fontFamily={FontFamily.ExtraBold}
        fontSize={fontSize}
        fontWeight={"900"}>
        {text}
      </Text>
      <Text
        x={x}
        y={y}
        fill={fill}
        fontFamily={FontFamily.ExtraBold}
        fontSize={fontSize}
        fontWeight={"900"}>
        {text}
      </Text>
    </Svg>
  );
}