gpt4 book ai didi

javascript - 如何关闭两条平行二次贝塞尔曲线的路径,其中每条曲线都以 MoveTo 标签开头

转载 作者:行者123 更新时间:2023-12-01 12:03:58 24 4
gpt4 key购买 nike

我正在使用 VueJS 和 SVG 从头开始​​实现 Sankey 图,我现在面临着关闭从节点到节点的两条平行二次贝塞尔曲线路径的困难。

例如,通过额外的计算,我获得了以下路径

path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

路径是这样组合的,以为行,结果不行

<g>
<template v-for="(point,index) in sankeyNode">
<template v-for="(pnode, idex) in Object.entries(point)">
<template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
<g style="stroke-width:1;" stroke="black" fill="pink" :stroke-opacity="0.3">
<path :d="paths[0]+' '+paths[1]+' Z'" />
</g>
</template>
</template>
</template>
</g>

这两条路径彼此平行,但我想让它们成为一条靠近的路径,这样我就可以填充组合路径,看起来如下图所示

enter image description here

目前,当路径合并时,它看起来是这样的

enter image description here

我已经尝试使用下面的图片进行说明

enter image description here

现在,当我到达 Path2 末端的“Point A”时,我尝试将 Vertical lineto 添加到“Point B”,这样我就可以从“Point B”形成到“Point E”的二次贝塞尔曲线,并且关闭 CABE 的路径,并通过添加从“点 C 到 E”的垂直线对 Path1 执行相同的操作,然后从点 E 到点 F 形成二次贝塞尔曲线并关闭 GCEF 的路径。

我的尝试没有成功,我正在重新阅读 SVG 文档以找到解决此问题的线索..

请我需要有人给我提供有关如何解决此问题的线索。谢谢

最佳答案

因为两条路径都是从左边开始的,所以我不得不反转第二条路径,让它从右边开始。接下来,我加入了路径的 2d 属性,并将第二条路径的 M 命令替换为 L(行)。我还通过在末尾添加 z 命令来关闭路径。我希望这就是您所需要的。

<svg viewBox="0 0 400 200">

<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994
L360.07142857142856,171.66646326824585Q197.53571428571428,107.65044814340591 35,107.65044814340591
z"/>

</svg>

关于javascript - 如何关闭两条平行二次贝塞尔曲线的路径,其中每条曲线都以 MoveTo 标签开头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59609470/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com