2014-03-05 8 views
0

jsPDF를 사용하여 SVG에서 정의한 베 지어 곡선을 그릴 수 있습니다. jsPDF를 사용하여 곡선을 올바르게 렌더링하지 못했습니다. jsPDF를 사용하여 아래 SVG에서 정의한 베 지어 곡선을 어떻게 그릴 수 있습니까?트러블 드로잉 jsPDF를 사용한 SVG 베 지어 곡선

SVG의 곡선 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" version="1.1" height="288"> 
    <path fill="black" stroke="black" d="M19.0544,25.8288C24.2384,43.2816,22.3952,46.9968,18.7376,50.510400000000004" stroke-width="0" font=" 10pt Arial"></path> 
</svg> 

jsPDF를 사용하여 곡선에서 내 시도 :

var doc = new jsPDF(); 
doc.lines([[24.2384, 43.2816, 22.3952, 46.9968, 18.7376, 50.5104]], null, null, [1, 1], 'FD'); 

SVG 렌더링 (왼쪽)와 생성했을 경우에 어떻게 내 jsPDF 코드가 생성하는 것 (오른쪽) :

enter image description here enter image description here

+1

'M ...'과 'm ...'을 유의하십시오. 귀하의 SVG 좌표 절대, 그리고 jsPDF 라이브러리 대신 상대 좌표 걸릴 내기. –

답변

2

코드에 초기 이동이 반영되지 않습니다. 설명서를 읽었을 때, 다음과 같은 내용이 아닌가?

var doc = new jsPDF(); 
doc.lines([[24.2384, 43.2816, 22.3952, 46.9968, 18.7376, 50.5104]], 19.0544,25.8288, [1, 1]); 

업데이트

워드 프로세서는 좌표가 (감사 POMAX) 상대 말할 통지, 그래서 이것을 시도하지 않았다.

var doc = new jsPDF(); 
var x = 19.0544; 
var y = 25.8288; 
doc.lines([[24.2384-x, 43.2816-y, 22.3952-x, 46.9968-y, 18.7376-x, 50.5104-y]], x,y, [1, 1]); 
+0

방금 ​​설명한 것과 같은 것을 시도했습니다. 초기 이동을 반영하도록 x와 y를 설정하면 커브가 오프셋되지만 커브의 모양이 고정되지 않습니다. 내가 시도한 것을 볼 수있다. 'var doc = new jsPDF(); doc.lines ([[24.2384, 43.2816, 22.3952, 46.9968, 18.7376, 50.5104]], 19.0544,25.8288, [1, 1], 'FD'), at http://mrrio.github.io/jsPDF/ –

+1

위의 Mike Kamerman의 의견이 맞습니다. 모든 lines() 좌표는 마지막 행의 원점을 기준으로합니다. 베 지어 좌표에서 초기 x, y를 뺄 필요가 있습니다. –

+0

이것은 그 것이다! 나는 상대적인 좌표를 보상하지 않았습니다. 그것을 고려하지 않고, x, y (메서드 라인의 2 번째 & 3 번째 인수)를 설정하면 커브가 그려지는 위치가 단지 오프셋됩니다. –