reactjs 如何正确填写笔画Dasharray

2vuwiymt 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(106)

- bounty将在4天后过期**。回答此问题可获得+50的声誉奖励。Qoomit正在寻找来自声誉良好来源的答案。

我正在尝试完成此操作...在此示例中，绿色笔划在选定人员（1）时填充，灰色笔划是人员总数（6）

另一个例子是绿色笔划填充（3）和总计（6）

我现在所完成的，它不能正确地填充，

const [personQuantity, setPersonQuantity] = useState(2)
  const [payingFor, setPayingFor] = useState(1)

  useEffect(() => {
    let amountPerPerson = subtotal / personQuantity
    let perPerson = amountPerPerson * payingFor
    setPerPerson(perPerson)

    if (personQuantity >= payingFor && personQuantity > 2) {
      setActivate(true)
    } else {
      setActivate(false)
    }
  }, [personQuantity, payingFor])

  const fillPercentage = (payingFor / personQuantity) * 100

  return (
    <>
       
            <div className="h-20 w-20 ">
              <svg className="circular-chart " viewBox="0 0 36 36">
                <path
                  fill="none"
                  strokeWidth="4"
                  strokeDasharray={`${fillPercentage + 1},1`}
                  className="circle-bg bg-DARK_1 stroke-2 stroke-white"
                  d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
                />
                <path
                  strokeWidth="4"
                  strokeLinecap="round"
                  fill="none"
                  className="circle stroke-LIGHT_GREEN_1  transition-opacity delay-150 ease-in-out"
                  strokeDasharray={`${fillPercentage}, 100`}
                  d="M18 2.0845
         a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
                />
              </svg>
            </div>

reactjs

来源：https://stackoverflow.com/questions/75478341/how-to-fill-correctly-the-strokedasharray

1条答案

按热度按时间

pgvzfuti1#

正如enxaneta所述，您使用的是100%的路径，因此您应该进行计算，以便白色绘制由间隔百分比空间分隔的人的数字，绿色填充包括中间空间在内的插槽的数量。
因此，假设小计是总人数，payingFor是应该是绿色的人数，我们有：

let pathSize = 100
let gapSize = 1
let percentForOne = (pathSize / subtotal)
let greenedPercent = (percentForOne * payingFor) - gapSize 
let notGreenedPercent = (percentForOne * (subtotal - payingFor)) + gapSize

所以对于白色：

strokeDasharray={`${percentForOne} - ${gapSize},${gapSize}`}

然后为绿色：

strokeDasharray={`${greenedPercent},${notGreenedPercent}`}

请注意，如果人数超过100人，则不正确，因为这意味着超过100个1%的间隔和他们之间的负空间，因此，当小计超过~40（美观值）时，您可能应该将gapSize设置为0
作为第二个注意事项，虽然使用路径来近似圆确实有效，但我建议使用<circle cx="18" cy="18" r="15.9155" pathlength=100>，在这两种情况下，您都需要将图形旋转-90度以获得绘图的垂直原点transform: rotate(-90deg)
我在这个codepen上做了一个演示（带有固定值）

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何正确填写笔画Dasharray

1条答案

相关问题

热门标签

最新问答