【问题标题】:Trouble Drawing SVG Bezier Curve with jsPDF使用 jsPDF 绘制 SVG 贝塞尔曲线的问题
【发布时间】:2014-03-05 16:02:06
【问题描述】:

我在 SVG 中定义了一条贝塞尔曲线,我想使用 jsPDF 来绘制它。我无法使用 jsPDF 正确渲染曲线。 如何使用 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 代码产生的内容(右):

【问题讨论】:

  • 注意M...m...;您的 SVG 坐标是绝对坐标,我敢打赌 jsPDF 库采用相对坐标。

标签: svg bezier jspdf


【解决方案1】:

我没有在您的代码中看到最初的举动。根据我对文档的阅读,这不应该更像以下内容吗?

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]);

【讨论】:

  • 我尝试了您刚才描述的方法。设置 x 和 y 以反映初始移动只是偏移曲线,但不修复曲线的样子。您可以通过在mrrio.github.io/jsPDFvar doc = new jsPDF(); doc.lines([[24.2384, 43.2816, 22.3952, 46.9968, 18.7376, 50.5104]], 19.0544,25.8288, [1, 1], 'FD'); 尝试了解我在说什么
  • Mike Kamerman 上面的评论是正确的。所有lines() 坐标都相对于最后一行的原点。您需要从贝塞尔坐标中减去初始 x,y。
  • 就是这样!我没有补偿相对坐标。在不考虑这一点的情况下,设置 x,y(方法行的第二个和第三个参数)只是偏移曲线绘制的位置。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-18
  • 1970-01-01
  • 1970-01-01
  • 2011-02-26
相关资源
最近更新 更多