无法在画布上绘制垂直虚线

Posted

技术标签:

【中文标题】无法在画布上绘制垂直虚线【英文标题】:Not able to draw vertical dashedline on canvas 【发布时间】:2020-09-08 06:14:33 【问题描述】:

我正在使用以下 javascript 算法在画布上绘制虚线。此算法正确绘制水平线但无法绘制垂直线:

            g.dashedLine = function (x, y, x2, y2, dashArray) 
            this.beginPath();
            this.lineWidth = "2";

            if (!dashArray)
                dashArray = [10, 5];

            if (dashLength == 0)
                dashLength = 0.001;     // Hack for Safari

            var dashCount = dashArray.length;
            this.moveTo(x, y);

            var dx = (x2 - x);
            var dy = (y2 - y);
            var slope = dy / dx;

            var distRemaining = Math.sqrt(dx * dx + dy * dy);
            var dashIndex = 0;
            var draw = true;

            while (distRemaining >= 0.1) 
                var dashLength = dashArray[(dashIndex++) % dashCount];

                if (dashLength > distRemaining)
                    dashLength = distRemaining;

                var xStep = Math.sqrt((dashLength * dashLength) / (1 + slope * slope));
                if (x < x2) 
                    x += xStep;
                    y += slope * xStep;
                
                else 
                    x -= xStep;
                    y -= slope * xStep;
                

                if (draw) 
                    this.lineTo(x, y);
                
                else 
                    this.moveTo(x, y);
                
                distRemaining -= dashLength;
                draw = !draw;
            
            this.stroke();
            this.closePath();
        ;

用于测试垂直线绘制的以下点:

  g.dashedLine(157, 117, 157,153, [10, 5]);

以下用于测试水平线绘制的点: g.dashedLine(157, 117, 160,157, [10, 5]);

【问题讨论】:

【参考方案1】:

当直线垂直时,dx = 0 导致斜率 = 无穷大。如果您编写自己的破折号逻辑,那么您需要处理 dx = 0(或非常接近 0)的特殊情况。在这种特殊情况下,您必须使用反斜率(即 dx / dy)和 yStep(而不是 xStep)。

更大的问题是您为什么要编写自己的破折号逻辑。 Canvas 内置了对虚线的支持。调用 setLineDash() 函数来设置破折号模式。完成后恢复之前的破折号图案。比如……

g.dashedLine = function (x, y, x2, y2, dashArray) 
    this.beginPath();
    this.lineWidth = "2";
    if (!dashArray)
        dashArray = [10, 5];
    var prevDashArray = this.getLineDash();
    this.setLineDash(dashArray);
    this.moveTo(x, y);
    this.lineTo(x2, y2);
    this.stroke();
    this.closePath();
    this.setLineDash(prevDashArray);
;

【讨论】:

以上是关于无法在画布上绘制垂直虚线的主要内容,如果未能解决你的问题,请参考以下文章

canvas绘制虚线,虚线方框,虚线圆

在Java中不使用笔划的虚线

如何在 iPhone 应用程序中用手指绘制虚线?

当应用程序在真正的Android设备上运行时,虚线实际上不是虚线

threejs 绘制多段虚线

在 UITextField 底部绘制虚线