关于 react定义节点字体 锯齿严重

[yym-yumeng123]

问题描述

我用 react 定义节点, 在渲染的时候电脑上看着字体非常模糊, 锯齿严重

const Node = ({ data }) => {
  console.log(data, "data")
  const { name, costDesc, statusStage = 0 } = data.data

  const isHovered = data.states?.includes("active")

  const currentStyle = STATUS_COLORS[statusStage] || STATUS_COLORS[0]

  const containerStyle = {
    width: "100%",
    height: "100%",
    background: currentStyle.bg,
    borderRadius: "4px",
    cursor: "pointer",
    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
    transform: isHovered
      ? "translateY(-2px) scale(1.02)"
      : "translateY(0) scale(1)",
    willChange: 'transform',
    WebkitFontSmoothing: 'subpixel-antialiased',
    textRendering: 'optimizeLegibility'
  }

  // 状态图标渲染
  const renderStatusIcon = () => {
    switch (statusStage) {
      case 1:
        return (
          <LoadingOutlined style={{ color: textColor, fontSize: 15 }} spin />
        )
      case -2:
        return <StopOutlined style={{ color: textColor, fontSize: 15 }} />
      case 2:
        return (
          <CloseCircleOutlined style={{ color: textColor, fontSize: 15 }} />
        )
      case 3:
        return (
          <CheckCircleOutlined style={{ color: textColor, fontSize: 15 }} />
        )
      case 5:
        return (
          <ExclamationCircleOutlined
            style={{ color: textColor, fontSize: 15 }}
          />
        )
      default:
        return null
    }
  }

  // 成本标签样式
  const costLabelStyle = {
    color: [0, -1].includes(statusStage)
      ? "rgba(88, 90, 99, 0.8)"
      : "rgba(255, 255, 255, 0.9)",
    background: [0, -1].includes(statusStage)
      ? "rgba(0, 0, 0, 0.05)"
      : "rgba(0, 0, 0, 0.15)",
    fontSize: 12,
    padding: "2px 6px",
    borderRadius: "6px",
    WebkitFontSmoothing: "antialiased",
    MozOsxFontSmoothing: "grayscale",
    textRendering: "optimizeLegibility",
  }

  // 根据背景色决定文字颜色
  const textColor = "#fff"

  return (
    <Flex style={containerStyle} align='center' justify='center'>
      <Flex vertical align='center' justify='center' gap={4}>
        <Flex align='center' justify='center' gap={8}>
          {renderStatusIcon()}
          <Text
            style={{
              color: textColor,
              fontWeight: 600,
              fontSize: 15,
              letterSpacing: "0.5px",
              WebkitFontSmoothing: "antialiased",
              MozOsxFontSmoothing: "grayscale",
              textRendering: "optimizeLegibility",
              backfaceVisibility: "hidden", // 添加
              willChange: "transform",
              transform: 'translate3d(0, 0, 0)',
              textDecoration: statusStage === -1 ? "line-through" : "none",
            }}
          >
            {name}
          </Text>
        </Flex>
        {costDesc && statusStage !== -2 && (
          <Text style={costLabelStyle}>{costDesc}</Text>
        )}
      </Flex>
    </Flex>
  )
}

• 图中可以看到 初始 文字 比较模糊
• 当我 hover 后, 文字变得清晰了,

这个问题遇见过得同学, 该怎么解决呢?

Version / 版本

5.x

OS / 操作系统

windows

Browser / 浏览器

chrome

[hustcc]

可以来一个 codesandbox 的 demo 嘛？按说使用 react，用的都是 html，应该不会糊啊~

[yym-yumeng123]

我在官网看两个示例截图给你, 一个是 react 自定义节点生成, 一个是 原生节点
你可以看下字体清晰度

可以给 react 自定义节点 添加 transform: isHovered
? "translateY(-2px) scale(1.02)"
: "translateY(0) scale(1)",, 放大图, 鼠标划上去看一下效果

[hustcc]

可能是这个 scale 覆盖率默认的吧？