캔버스 또는 sonic.js 형식의 베 지어 곡선을 사용하여 간단한 객체 추적

Question

호와 베 지어 곡선을 사용하여 간단한 객체의 윤곽을 추적하고 싶습니다. 쉬운 포토샵/펜 도구를 사용하여 수행하는, 그러나 나는 다음과 같은 형식의 곡선의 실제 좌표가 필요합니다

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

이 용이하게 응용 프로그램이 거기를? 시행 착오를 통해 이러한 입력물을 가지고 노는 것은 매우 비 직관적입니다. 여기에 내가 추적 할 수 있도록하고 싶습니다 무엇의 샘플입니다 :이 작업을 수행 할 수 있어야합니다 사람들을위한

Answer 1

는 내가 필요로하는 형식의 곡선을 얻을 수 있었다 (음향. js 형식)을 사용하여 곡선을 사용하여 inkscape에서 내 곡선을 그립니다. 그런 다음 XML 편집기 (EDIT> Inkscape의 XML 편집기)를 사용하여 내 곡선을 설명하는 경로의 svg 'd ='특성을 복사 할 수있었습니다. 다음으로 나는 svg-to-canvas을 사용하여 html5 캔버스 코드 (ctx.bezierCurveTo 형식)를 가져 왔습니다. 관련 줄을 텍스트 파일에 저장하고이 bash 스크립트를 작성하여 캔버스 코드를 sonic.js 경로로 변환했습니다. 사용법 convert.sh data.txt. 출력은 음향에서 잘 작동합니다. 최종 결과는 probe입니다.

#!/bin/bash 
round() { 
     float=$1 
     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 < "$1"