React Native ART和D3：如何使d3.path的角落四舍五入？

Posted 2021-03-30

有没有办法围绕我用d3.path制作的角落或酒吧？我正在使用React Native ART。

现在我有这个：

但我想要圆角。我想做这样的事情：

_createBarChart (x, y, w, h) {
  var path = d3.path.path()
  path.rect(x, y, w, h)
  return path
}

return (
  <View style={styles.container}>
    <Surface width={screen.width} height={200}>
      <Group x={0} y={180}>
        <Shape d={this._createBarChart(7, -35, 70, 35)} fill={color.purple} />
      </Group>
    </Surface>
  </View>
)

答案

我使用此实用程序功能绘制带有圆角的rect（您可以指定哪些角不应该舍入）：

function drawRoundedRect(
  xCoord,
  yCoord,
  width,
  height,
  radius,
  needRoundingTopLeft = true,
  needRoundingTopRight = true,
  needRoundingBottomLeft = true,
  needRoundingBottomRight = true
) {
  let retval;
  retval = 'M' + (xCoord + radius) + ',' + yCoord;
  retval += 'h' + (width - 2 * radius);

  if (needRoundingTopRight) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius;
  } else { retval += 'h' + radius; retval += 'v' + radius; }

  retval += 'v' + (height - 2 * radius);

  if (needRoundingBottomRight) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius;
  } else { retval += 'v' + radius; retval += 'h' + -radius; }

  retval += 'h' + (2 * radius - width);

  if (needRoundingBottomLeft) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius;
  } else { retval += 'h' + -radius; retval += 'v' + -radius; }

  retval += 'v' + (2 * radius - height);

  if (needRoundingTopLeft) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
  } else { retval += 'v' + -radius; retval += 'h' + radius; }

  retval += 'z';

  return retval;
}

您可以使用此代码在组件中创建方法，并以这种方式使用它：

_createBarChart(x, y, w, h) {
  return this._drawRoundedRect(x, y, w, h, 10)
}

_drawRoundedRect(xCoord, yCoord, width, height, radius, needRoundingTopLeft = true, needRoundingTopRight = true, needRoundingBottomLeft = true, needRoundingBottomRight = true) {
    /* code above */
}

return (
  <View style={styles.container}>
    <Surface width={screen.width} height={200}>
      <Group x={0} y={180}>
        <Shape d={this._createBarChart(7, -35, 70, 35)} fill={color.purple} />
      </Group>
    </Surface>
  </View>
)

在下面隐藏的代码段中查看工作演示：

function drawRoundedRect(
  xCoord,
  yCoord,
  width,
  height,
  radius,
  needRoundingTopLeft = true,
  needRoundingTopRight = true,
  needRoundingBottomLeft = true,
  needRoundingBottomRight = true
) {
  let retval;
  retval = 'M' + (xCoord + radius) + ',' + yCoord;
  retval += 'h' + (width - 2 * radius);

  if (needRoundingTopRight) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius;
  } else { retval += 'h' + radius; retval += 'v' + radius; }

  retval += 'v' + (height - 2 * radius);

  if (needRoundingBottomRight) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius;
  } else { retval += 'v' + radius; retval += 'h' + -radius; }

  retval += 'h' + (2 * radius - width);

  if (needRoundingBottomLeft) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius;
  } else { retval += 'h' + -radius; retval += 'v' + -radius; }

  retval += 'v' + (2 * radius - height);

  if (needRoundingTopLeft) {
    retval += 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
  } else { retval += 'v' + -radius; retval += 'h' + radius; }

  retval += 'z';

  return retval;
}

d3.select('svg#all-round')
	.append('path')
  .attr('d', drawRoundedRect(0, 0, 50, 50, 10))
  
  d3.select('svg#only-top-round')
	.append('path')
  .attr('d', drawRoundedRect(0, 0, 50, 50, 10, true, true, false, false))

body {
  display: flex;
}

div {
  margin-right: 15px;
}

svg {
  fill: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<div>
  <h3>Round all:</h3>
  <svg id="all-round" width="60" height="60"></svg>
</div>
<div>
  <h3>Round only top:</h3>
  <svg id="only-top-round" width="60" height="60"></svg>
</div>

以上是关于React Native ART和D3：如何使d3.path的角落四舍五入？的主要内容，如果未能解决你的问题，请参考以下文章

在 React 应用程序中使用 D3 渲染元素的价格？

在 React 应用程序中使 D3 图表具有响应性

如何使流图响应式（d3.js）？

如何使流星中的d3方向力图反应？

如何使 D3 中的标签和节点强制布局可点击以导航到 URL？

D3.js 与 React.js