使用贝塞尔曲线以 canvas 或 sonic.js 格式跟踪一个简单对象

Question

我想使用圆弧和贝塞尔曲线描绘一个简单物体的轮廓。使用 Photoshop/pen 工具很容易做到，但我需要以下格式的曲线的实际坐标：

['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]
['arc', cx, cy, radius, startDegree, endDegree]

有没有可以让这一切变得简单的应用程序？因为仅仅通过反复试验来处理这些输入是非常不直观的。这是我希望能够追踪的示例：

Answer 1

对于需要能够做到这一点的任何人，我能够通过首先使用曲线在 inkscape 中绘制我的曲线来获得我需要的格式（sonic.js 格式）的曲线。然后，我可以使用 XML 编辑器（Inkscape 中的编辑>XML 编辑器）复制描述我的曲线的路径的 svg 'd=' 属性。接下来我使用了 svg-to-canvas to get the html5 canvas code (ctx.bezierCurveTo format). I saved the relevant lines to a text file and wrote this bash script to convert the canvas code to sonic.js paths. Usage convert.sh data.txt. Output works well in sonic. Here's the final result: probe。

#!/bin/bash
round() {
        float=
        echo "($float+0.5)/1" | bc
}
INDEX=1
while IFS='' read -r rawline || [[ -n "$rawline" ]]; do
line=$(echo $rawline | cut -d "(" -f2 | cut -d ")" -f1)
if [ $INDEX -eq 1 ];
then
        STARTX=$( round $(echo $line | cut -d',' -f1) )
        STARTY=$( round $(echo $line | cut -d',' -f2) )
        INDEX=2
else
        CP1X=$( round $(echo $line | cut -d',' -f1) )
        CP1Y=$( round $(echo $line | cut -d',' -f2))
        CP2X=$( round $(echo $line | cut -d',' -f3))
        CP2Y=$( round $(echo $line | cut -d',' -f4))
        ENDX=$( round $(echo $line | cut -d',' -f5))
        ENDY=$( round $(echo $line | cut -d',' -f6))
        echo "['bezier', $STARTX, $STARTY, $ENDX, $ENDY, $CP1X, $CP1Y, $CP2X, $CP2Y],"
        STARTX=$ENDX
        STARTY=$ENDY
fi
done < ""

使用贝塞尔曲线以 canvas 或 sonic.js 格式跟踪一个简单对象

trace a simple object using bezier curves, in canvas or sonic.js format

graphics

bezier