Question

我正在尝试找到一种在P5.js中使用我自己的向量的方法，并且最终发现vertex()方法可以使用精确的坐标，而SVG可以使用相对坐标，这是Adobe Illustrator在其导出的SVG文件中使用的。

为了显示一个示例，这是我正在使用的SVG元素

<path d="
    M 18.2408638, 8.8929052
    c 0 -0.497056, 0.4029446 -0.8999996, 0.9000015 -0.8999996
    c 0.4970551, 0, 0.8999996, 0.4029436, 0.8999996, 0.8999996
    c 0, 0.497057 -0.4029446, 0.9000006 -0.8999996, 0.9000006
    C 18.6438084, 9.7929058, 18.2408638, 9.3899622, 18.2408638, 8.8929052
    L 18.2408638, 8.8929052
    z

    M 18.2408638, 224.8928986
    c 0 -0.4970551, 0.4029446 -0.8999939, 0.9000015 -0.8999939
    c 0.4970551, 0, 0.8999996, 0.4029388, 0.8999996, 0.8999939
    c 0, 0.4970703 -0.4029446, 0.9000092 -0.8999996, 0.9000092
    C 18.6438084, 225.7929077, 18.2408638, 225.3899689, 18.2408638, 224.8928986
    L 18.2408638, 224.8928986
    z

    M 19.1408653, 574.3882446
    l 3.6405754 -35.3434448
    l 0.6952877 -90.5072021
    l -7.9764404 -15.9528809
    l 9.1014404 -21.4137573
    l 1.8202896 -186.2780609
    c -0.0128517 -5.6220703 -5.875351 -12.7870026 -7.2811527 -14.5623016
    c 4.955801 -15.2889252, 7.2811527 -29.1222687, 7.2811527 -43.6869202
    c 0 -22.0896454 -7.2811527 -36.0986023 -7.2811527 -49.7507782
    c 0 -0.6012344 -0.7525311 -33.8095627, 7.2811527 -64.3130798
    V 8.8929052
    c 0 -4.0212693 -3.2598839 -7.2811499 -7.2811527 -7.2811499
    c -6.981699, 0 -11.606699, 9.8882446 -14.5623074, 21.8434601
    c 13.6521606, 4.5507202, 10.0115871, 79.7855453 -3.6405759, 93.4376907
    c 13.6521606, 13.6521683, 21.8434582, 60.8787003, 3.6405764, 93.5977402
    l 7.2811527, 14.4022522
    l 1.8202877, 186.2780609
    l -9.1014404, 21.8434448
    l 10.9217291, 21.8434753
    v 84.1869202
    L 19.1408653, 574.3882446
    z"
/>

svg中的

M, C, L, V表示精确坐标，而m, c, l, v表示相对坐标。我可以通过从上一个坐标中添加/减去每个坐标来获得确切的坐标，这将成为SVG的一部分

M 19.1408653, 574.3882446
l 3.6405754 -35.3434448
l 0.6952877 -90.5072021

P5.js中的

vertex(19.1408653, 574.3882446);
vertex(22.7814413, 539.0447998);
vertex(23.476729, 448.5375977);

我可以看到如何使用其他P5方法在需要绘制曲线的地方以及内部beginContour()/endContour()方法中进行绘制，从而可以看到如何将其用于渲染SVG。，但我只是想知道是否有一种方法可以处理相对位置，因此我不必手动重新计算每个坐标。我的最终目标是将坐标另存为数据对象以加载到组件中，因此我希望能够仅复制和粘贴坐标。有办法解决吗？

有没有一种方法可以相对于P5.js中先前顶点的位置创建顶点？

0 个答案: