我需要在使用jsPDF创建的PDF中绘制虚线 (https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html)。
简单的直线可以通过以下方式创建:
简单的直线可以通过以下方式创建:
doc.line(20, 25, 60, 25);
如何创建虚线或点状线?
doc.line(20, 25, 60, 25);
如何创建虚线或点状线?
我曾经遇到过同样的问题,解决方法如下:
/**
* Draws a dotted line on a jsPDF doc between two points.
* Note that the segment length is adjusted a little so
* that we end the line with a drawn segment and don't
* overflow.
*/
function dottedLine(doc, xFrom, yFrom, xTo, yTo, segmentLength)
{
// Calculate line length (c)
var a = Math.abs(xTo - xFrom);
var b = Math.abs(yTo - yFrom);
var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
// Make sure we have an odd number of line segments (drawn or blank)
// to fit it nicely
var fractions = c / segmentLength;
var adjustedSegmentLength = (Math.floor(fractions) % 2 === 0) ? (c / Math.ceil(fractions)) : (c / Math.floor(fractions));
// Calculate x, y deltas per segment
var deltaX = adjustedSegmentLength * (a / c);
var deltaY = adjustedSegmentLength * (b / c);
var curX = xFrom, curY = yFrom;
while (curX <= xTo && curY <= yTo)
{
doc.line(curX, curY, curX + deltaX, curY + deltaY);
curX += 2*deltaX;
curY += 2*deltaY;
}
}
jsPDF
的最新版本已经内置了一个函数:
setLineDash
【文档】
例如以下代码绘制了一条由连续10mm的线段和10mm的空白段交替组成的虚线,并沿左到右方向重复。假设你正在绘制的页面具有默认设置(即A4纸张,毫米单位等):
doc.setLineDash([10, 10], 0);
doc.line(20, 25, 60, 25);
下面的线条将绘制7毫米的实线,3毫米的空格,1毫米的实线,3毫米的空格,然后重复这个过程。不过,它会从10毫米处开始图案,所以第一个要绘制的破折号部分是1毫米长的那一段:
doc.setLineDash([7, 3, 1, 3], 10);
doc.line(20, 25, 60, 25);