首页 > 其他 > 详细

(转)画图绘制虚线

时间:2014-02-13 18:32:09      阅读:455      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
 //function kindly provided by phrogz at:  
//http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas 
       var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
        if (CP && CP.lineTo) {
            CP.dashedLine = function (x, y, x2, y2, dashArray) {
                if (!dashArray) dashArray = [10, 5];
                var dashCount = dashArray.length;
                this.moveTo(x, y);
                var dx = (x2 - x), dy = (y2 - y);
                var slope = dy / dx;
                var distRemaining = Math.sqrt(dx * dx + dy * dy);
                var dashIndex = 0, 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));

                    var signal = (x2 > x ? 1 : -1);

                    x += xStep * signal;
                    y += slope * xStep * signal;
                    this[draw ? ‘lineTo‘ : ‘moveTo‘](x, y);
                    distRemaining -= dashLength;
                    draw = !draw;
                }
            }
        }
bubuko.com,布布扣

(转)画图绘制虚线

原文:http://www.cnblogs.com/hb-strive/p/3547750.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!