用canvas绘制圆点虚线的函数

实际项目中使用到了这个功能,想着做成一个函数方便日后调用,草草写就,纰漏不少,还是有待完善。目前只能绘制直线和折线。
关于下面那个Object.prototype.extend函数旨在获取一个新对象,不对原有对象进行改变,欢迎赐教。

// JavaScript source code
'use strict';
function dotLine(canvasId, options) {
    function DotLine(canvasId, options) {
        this.options = DotLine.Defaults.extend(options);
        this.Canvas = document.getElementById(canvasId);
        this.Drawer = this.Canvas.getContext('2d');
        this.Drawer.fillStyle = this.options.lineColor;
        this.pointX = this.options.constX;
        this.pointY = this.options.constY;
        this.turns = this.options.turns;

        var stepLength = this.options.stepLen;
        if (this.turns.length) {
            var moveX = stepLength * Math.cos(this.options.direction);
            var moveY = stepLength * Math.sin(this.options.direction);
            var stepNum = this.options.stepNum;
            this.Draw(false, true, moveX, moveY, stepNum);
            this.pointX += moveX * (stepNum - 1);
            this.pointY += moveY * (stepNum - 1);
            for (var turn = 0; turn < this.turns.length; turn++) {
                stepNum = this.turns[turn].stepNum;
                moveX = stepLength * Math.cos(this.turns[turn].direction);
                moveY = stepLength * Math.sin(this.turns[turn].direction);
                this.Draw(false, true, moveX, moveY, stepNum);
                this.pointX += moveX * (stepNum - 1);
                this.pointY += moveY * (stepNum - 1);
            }
        }
        else {
            var moveX = stepLength * Math.cos(this.options.direction);
            var moveY = stepLength * Math.sin(this.options.direction);
            var stepNum = this.options.stepNum;
            this.Draw(false, true, moveX, moveY, stepNum);
        }
    }

    DotLine.Defaults = {
        constX: 3,
        constY: 3,
        stepLen: 30,
        stepNum: 5,
        direction: Math.PI * 0,
        r: 3,
        lineColor: '#000',
        turns: [
            /*{
                stepNum: 0,
                direction: Math.PI * 3/2 // 0 <= direction < Math.PI*2
            }*/
        ]
    };

    DotLine.prototype.Draw = function (pathBegan, closeAfterDrawing, moveX, moveY, stepNum) {
        if (!pathBegan) {
            this.Drawer.beginPath();
        }
        for (var i = 0; i < stepNum; i++) {
            this.Drawer.arc(this.pointX + moveX * i, this.pointY + moveY * i, 3, 0, Math.PI * 2, true);
            this.Drawer.closePath();
            this.Drawer.fill();
            this.Drawer.beginPath();
            }
        if (closeAfterDrawing) {
            this.Drawer.closePath();
        }
    }
    var dotline = new DotLine(canvasId,options);
    return dotline;
}

Object.prototype.extend:

// JavaScript source code
'use strict';
Object.prototype.extend = function (objB) {
    if (typeof this === 'object' && typeof objB === 'object') {
        var destination = {};
        for (var attr in this) {
            destination[attr] = this[attr];
        }
        for (var attr in objB) {
            destination[attr] = objB[attr];
        }
        return destination;
    }
    else {
        var destination = {};
        for (var attr in this) {
            destination[attr] = this[attr];
        }
        return destination;
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值