diff --git a/src/core/attributes.js b/src/core/attributes.js index f1ff70773b..dde369676b 100644 --- a/src/core/attributes.js +++ b/src/core/attributes.js @@ -310,6 +310,70 @@ p5.prototype.strokeJoin = function(join) { return this; }; +/** + * Sets the line dash pattern used when drawing lines, + * using an array of values which specify alternating lengths of lines and gaps + * which describe the pattern. + * If the argument is omitted, the function just returns the current line dash setting. + * + * @method lineDash + * @param {Number[]} [segments] An array of numbers which specify distances to alternately draw a line and a gap. + * If the number of elements in the array is odd, the elements of the array get copied and concatenated. + * For example, (5, 15, 25) will become (5, 15, 25, 5, 15, 25). + * If the array is empty, the line dash list is cleared and line strokes return to being solid. + * @return {Number[]} The current line dash setting. + * @example + *
+ * + * strokeWeight(2); + * + * // A simple pattern: + * // Stroke 5 pixels and leave 5 pixels of spacing + * lineDash([5]); + * + * line(10, 10, 10, 90); + * + * fill(255, 0, 0); + * rect(30, 20, 60, 60); + * + *
+ * + *
+ * + * strokeWeight(2); + * stroke(255, 0, 0); + * + * // A more complex pattern: + * // Stroke 10 pixels, leave 5 pixels of spacing, stroke 2 pixels, leave 5 pixels of spacing and repeat + * lineDash([10, 5, 2, 5]); + * + * ellipse(width / 2, height / 2, 80); + * + *
+ * + *
+ * + * stroke(255, 255, 0); + * + * lineDash([10]); + * line(10, height / 3, 90, height / 3); + * + * // Go back to solid lines + * lineDash([]); + * line(10, 2 / 3 * height, 90, 2 / 3 * height); + * + *
+ * + * @alt + * A dashed vertical line and a square with a dashed perimeter. + * A circle with a red, dashed outline. + * A dashed line on the top, a normal line on the bottom. + */ +p5.prototype.lineDash = function(segments) { + p5._validateParameters('lineDash', arguments); + return this._renderer.lineDash(segments); +}; + /** * Sets the width of the stroke used for lines, points, and the border * around shapes. All widths are set in units of pixels. diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 9d9f3b2a3c..30b72eb5b7 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -1042,6 +1042,15 @@ p5.Renderer2D.prototype.strokeJoin = function(join) { return this; }; +p5.Renderer2D.prototype.lineDash = function(segments) { + if (typeof segments === 'undefined') { + return this.drawingContext.getLineDash(); + } + + this.drawingContext.setLineDash(segments); + return segments; +}; + p5.Renderer2D.prototype.strokeWeight = function(w) { if (typeof w === 'undefined' || w === 0) { // hack because lineWidth 0 doesn't work