最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5 Animating a dashed line - Stack Overflow

programmeradmin2浏览0评论

Being relatively new to the HTML5 game, just wanted to ask if anyone knew if it was possible to animate a dashed line along a path? Think snake from Nokia days, just with a dashed line...

I've got a dashed line (which represents electrical current flow), which I'd like to animate as 'moving' to show that current is flowing to something.

Thanks to Rod's answer on this post, I've got the dashed line going, but am not sure where to start to get it moving. Anyone know where to begin?

Thanks!

Being relatively new to the HTML5 game, just wanted to ask if anyone knew if it was possible to animate a dashed line along a path? Think snake from Nokia days, just with a dashed line...

I've got a dashed line (which represents electrical current flow), which I'd like to animate as 'moving' to show that current is flowing to something.

Thanks to Rod's answer on this post, I've got the dashed line going, but am not sure where to start to get it moving. Anyone know where to begin?

Thanks!

Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked May 16, 2011 at 3:32 crawfcrawf 9,65810 gold badges36 silver badges43 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

Got it working here, based on this post by phrogz.

What i did:

  • Add a start parameter which is a number between 0 and 99
  • Calculate the dashSize summing the contents of the dash array
  • Calculate dashOffSet as a fraction of dashSize based on start percent
  • Subtracted the offset from x, y and added to dx, dy
  • Only started drawying after the offset been gone (it´s negative, remember)
  • Added a setInterval to update the start from 0 to 99, step of 10

Update

The original algorithm wasn't working for vertical or negative inclined lines. Added a check to use the inclination based on the y slope on those cases, and not on the x slope.

Demo here

Updated code:

if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
    CanvasRenderingContext2D.prototype.dashedLine = function(x, y, x2, y2, dashArray, start) {
        if (!dashArray) dashArray = [10, 5];
        var dashCount = dashArray.length;
        var dashSize = 0;
        for (i = 0; i < dashCount; i++) dashSize += parseInt(dashArray[i]);
        var dx = (x2 - x),
            dy = (y2 - y);
        var slopex = (dy < dx);
        var slope = (slopex) ? dy / dx : dx / dy;
        var dashOffSet = dashSize * (1 - (start / 100))
        if (slopex) {
            var xOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
            x -= xOffsetStep;
            dx += xOffsetStep;
            y -= slope * xOffsetStep;
            dy += slope * xOffsetStep;
        } else {
            var yOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
            y -= yOffsetStep;
            dy += yOffsetStep;
            x -= slope * yOffsetStep;
            dx += slope * yOffsetStep;
        }
        this.moveTo(x, y);
        var distRemaining = Math.sqrt(dx * dx + dy * dy);
        var dashIndex = 0,
            draw = true;
        while (distRemaining >= 0.1 && dashIndex < 10000) {
            var dashLength = dashArray[dashIndex++ % dashCount];
            if (dashLength > distRemaining) dashLength = distRemaining;
            if (slopex) {
                var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                x += xStep
                y += slope * xStep;
            } else {
                var yStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                y += yStep
                x += slope * yStep;
            }
            if (dashOffSet > 0) {
                dashOffSet -= dashLength;
                this.moveTo(x, y);
            } else {
                this[draw ? 'lineTo' : 'moveTo'](x, y);
            }
            distRemaining -= dashLength;
            draw = !draw;
        }
        // Ensure that the last segment is closed for proper stroking
        this.moveTo(0, 0);
    }
}

var dashes = '10 20 2 20'

var c = document.getElementsByTagName('canvas')[0];
c.width = 300;
c.height = 400;
var ctx = c.getContext('2d');
ctx.strokeStyle = 'black';

var drawDashes = function() {
    ctx.clearRect(0, 0, c.width, c.height);
    var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);
    if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;

    ctx.lineWidth = 4;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.dashedLine(10, 0, 10, c.height, dashGapArray, currentOffset);
    ctx.dashedLine(0, 10, c.width, 10, dashGapArray, currentOffset);
    ctx.dashedLine(0, 0, c.width, c.height, dashGapArray, currentOffset);
    ctx.dashedLine(0, c.height, c.width, 0, dashGapArray, currentOffset);
    ctx.closePath();
    ctx.stroke();
};
window.setInterval(dashInterval, 500);

var currentOffset = 0;

function dashInterval() {
    drawDashes();
    currentOffset += 10;
    if (currentOffset >= 100) currentOffset = 0;
}

You can create the dashed line animation using SNAPSVG library.

Please check the tutorial here DEMO

发布评论

评论列表(0)

  1. 暂无评论