在jsPDF中创建虚线或虚线

Question

我需要在使用jsPDF创建的PDF中绘制一条虚线(https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html)

创建一个简单的行:

doc.line(20, 25, 60, 25);

http://jsfiddle.net/S3XRp/78/

如何创建虚线或虚线？

Answer 1

我有同样的问题,并且这样做:

/**
 * 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;
    }
}

Answer 2

更高版本的jsPDF有一个内置函数：

setLineDash [文档]

例如，下面绘制一条由 10 毫米长的线组成的虚线，然后是 10 毫米的空间，从左到右重复。我假设您要在具有所有默认设置（即 A4、毫米单位等）的页面上绘图：

doc.setLineDash([10, 10], 0);
doc.line(20, 25, 60, 25);

下面将绘制 7mm 的线，3mm 的空间，1mm 的线，3mm 的空间，然后重复，但是，它将在 10mm 处开始图案，因此要绘制的破折号的第一部分是 1mm 部分：

doc.setLineDash([7, 3, 1, 3], 10);
doc.line(20, 25, 60, 25);