首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在jsPDF中创建虚线或虚线

在jsPDF中创建虚线或虚线
EN

Stack Overflow用户
提问于 2015-01-04 07:42:25
回答 2查看 19.6K关注 0票数 9

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

一条简单的代码行被创建为:

代码语言:javascript
复制
doc.line(20, 25, 60, 25);

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

如何创建虚线或虚线?

EN

回答 2

Stack Overflow用户

发布于 2015-09-04 22:49:26

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

代码语言:javascript
复制
/**
 * 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;
    }
}
票数 11
EN

Stack Overflow用户

发布于 2019-03-05 07:49:57

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

setLineDash [Docs]

例如,下面将绘制一条由绘制的10 to直线组成的虚线,然后沿从左到右的方向重复10 to的间距。我假设您正在绘制一个具有所有默认设置(即A4、mm单位等)的页面:

代码语言:javascript
复制
doc.setLineDash([10, 10], 0);
doc.line(20, 25, 60, 25);

下面将绘制7 7mm的线,3 7mm的间距,1 7mm的线,3 7mm的间距,然后重复,但是,它将开始10 7mm的模式,所以要绘制的虚线的第一部分是1 7mm的部分:

代码语言:javascript
复制
doc.setLineDash([7, 3, 1, 3], 10);
doc.line(20, 25, 60, 25);

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27760789

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档