diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 7935255b49..de64d68690 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -24,6 +24,7 @@ class Renderer2D extends p5.Renderer{ this._setFill(constants._DEFAULT_FILL); this._setStroke(constants._DEFAULT_STROKE); this.drawingContext.lineCap = constants.ROUND; + this.miterLimit = 10; this.drawingContext.font = 'normal 12px sans-serif'; } @@ -1132,6 +1133,11 @@ class Renderer2D extends p5.Renderer{ return this; } + miterLimit (l) { + this.drawingContext.miterLimit = l; + return this; + } + _getFill () { if (!this._cachedFillStyle) { this._cachedFillStyle = this.drawingContext.fillStyle; diff --git a/src/core/shape/attributes.js b/src/core/shape/attributes.js index e50b17c577..bcfd745dfb 100644 --- a/src/core/shape/attributes.js +++ b/src/core/shape/attributes.js @@ -57,7 +57,7 @@ import * as constants from '../constants'; * * */ -p5.prototype.ellipseMode = function(m) { +p5.prototype.ellipseMode = function (m) { p5._validateParameters('ellipseMode', arguments); if ( m === constants.CORNER || @@ -94,7 +94,7 @@ p5.prototype.ellipseMode = function(m) { * * */ -p5.prototype.noSmooth = function() { +p5.prototype.noSmooth = function () { if (!this._renderer.isP3D) { if ('imageSmoothingEnabled' in this.drawingContext) { this.drawingContext.imageSmoothingEnabled = false; @@ -158,7 +158,7 @@ p5.prototype.noSmooth = function() { * * */ -p5.prototype.rectMode = function(m) { +p5.prototype.rectMode = function (m) { p5._validateParameters('rectMode', arguments); if ( m === constants.CORNER || @@ -196,7 +196,7 @@ p5.prototype.rectMode = function(m) { * * */ -p5.prototype.smooth = function() { +p5.prototype.smooth = function () { this.setAttributes('antialias', true); if (!this._renderer.isP3D) { if ('imageSmoothingEnabled' in this.drawingContext) { @@ -232,7 +232,7 @@ p5.prototype.smooth = function() { * * */ -p5.prototype.strokeCap = function(cap) { +p5.prototype.strokeCap = function (cap) { p5._validateParameters('strokeCap', arguments); if ( cap === constants.ROUND || @@ -299,7 +299,7 @@ p5.prototype.strokeCap = function(cap) { * * */ -p5.prototype.strokeJoin = function(join) { +p5.prototype.strokeJoin = function (join) { p5._validateParameters('strokeJoin', arguments); if ( join === constants.ROUND || @@ -348,10 +348,76 @@ p5.prototype.strokeJoin = function(join) { * * */ -p5.prototype.strokeWeight = function(w) { +p5.prototype.strokeWeight = function (w) { p5._validateParameters('strokeWeight', arguments); this._renderer.strokeWeight(w); return this; }; +/** + * A number specifying the miter limit at which point the `MITER` style is forced to `BEVEL`. + * + * @method miterLimit + * @param {Number} limit the limit of the miter (in pixels). + * @chainable + * @example + *
+ * function setup() { + * frameRate(30); + * } + * + * function draw() { + * background(204); + * noFill(); + * strokeWeight(10.0); + * strokeJoin(MITER); + * beginShape(); + * vertex(35, 20); + * vertex(65, 50); + * vertex(35, 80); + * endShape(); + * + * strokeWeight(2); + * miterLimit(map(mouseX, 0, width, 0, 5)); + * stroke('red'); + * line(28, 0, 28, height); + * stroke('black'); + * line(mouseX, 0, mouseX, height); + * } + *
+ * + *
+ * function preload() { + * font = loadFont('Kingthings_Trypewriter.ttf'); + * } + * + * function setup() { + * frameRate(30); + * } + * + * function draw() { + * background(204); + * textFont(font); + * textSize(42); + * strokeWeight(30); + * stroke(0); + * + * fill(255); + * textAlign(CENTER, CENTER); + * text('HI', width/2, height/2); + * miterLimit(map(mouseX, 0, width, 0, 5)); + * + * stroke(0); + * noFill(); + * strokeWeight(1); + * line(mouseX, 0, mouseX, height); + * } + *
+ */ +p5.prototype.miterLimit = function (limit) { + p5._validateParameters('miterLimit', arguments); + this._renderer.miterLimit(limit); + return this; +}; + export default p5;