Skip to content

fix : other shape use the shape class also add new roundrect Primitive #8899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davepagurek merged 5 commits into from
Jun 11, 2026
Merged

fix : other shape use the shape class also add new roundrect Primitive #8899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
300276c
fix : other shape use the shape class also add new roundrect Primitive
VANSH3104 Jun 10, 2026
820896d
Merge branch 'dev-2.0' into fix/other-shape-to-class
VANSH3104 Jun 10, 2026
6873709
test: add rounded rect visual regression tests
VANSH3104 Jun 11, 2026
9578ed6
Merge branch 'fix/other-shape-to-class' of https://github.com/VANSH31…
VANSH3104 Jun 11, 2026
38dd54a
Merge branch 'main' into fix/other-shape-to-class
davepagurek Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 27 additions & 196 deletions src/core/p5.Renderer2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,96 +705,32 @@ class Renderer2D extends Renderer {
}

line(x1, y1, x2, y2) {
const ctx = this.drawingContext;
if (!this.states.strokeColor) {
return this;
} else if (this._getStroke() === styleEmpty) {
return this;
}
if (this._clipping) {
const tempPath = new Path2D();
tempPath.moveTo(x1, y1);
tempPath.lineTo(x2, y2);
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.line(x1, y1, x2, y2);
shape.endShape();
this.drawShape(shape);

return this;
}

point(x, y) {
const ctx = this.drawingContext;
if (!this.states.strokeColor) {
return this;
} else if (this._getStroke() === styleEmpty) {
return this;
}
const s = this._getStroke();
const f = this._getFill();
if (this._clipping) {
const tempPath = new Path2D();
const drawingContextWidth = this.drawingContext.lineWidth;
tempPath.arc(x, y, drawingContextWidth / 2, 0, constants.TWO_PI);
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
this._setFill(s);
ctx.beginPath();
ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false);
ctx.fill();
this._setFill(f);
const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.point(x, y);
shape.endShape();
this.drawShape(shape);

return this;
}

quad(x1, y1, x2, y2, x3, y3, x4, y4) {
const ctx = this.drawingContext;
const doFill = !!this.states.fillColor,
doStroke = this.states.strokeColor;
if (doFill && !doStroke) {
if (this._getFill() === styleEmpty) {
return this;
}
} else if (!doFill && doStroke) {
if (this._getStroke() === styleEmpty) {
return this;
}
}
if (this._clipping) {
const tempPath = new Path2D();
tempPath.moveTo(x1, y1);
tempPath.lineTo(x2, y2);
tempPath.lineTo(x3, y3);
tempPath.lineTo(x4, y4);
tempPath.closePath();
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.closePath();
if (doFill) {
ctx.fill();
}
if (doStroke) {
ctx.stroke();
}
const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.quad(x1, y1, x2, y2, x3, y3, x4, y4);
shape.endShape();
this.drawShape(shape);

return this;
}

Expand All @@ -807,134 +743,29 @@ class Renderer2D extends Renderer {
let tr = args[5];
let br = args[6];
let bl = args[7];
const ctx = this.drawingContext;
const doFill = !!this.states.fillColor,
doStroke = this.states.strokeColor;
if (doFill && !doStroke) {
if (this._getFill() === styleEmpty) {
return this;
}
} else if (!doFill && doStroke) {
if (this._getStroke() === styleEmpty) {
return this;
}
}
if (this._clipping) {
const tempPath = new Path2D();
if (typeof tl === 'undefined') {
tempPath.rect(x, y, w, h);
} else {
tempPath.roundRect(x, y, w, h, [tl, tr, br, bl]);
}
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
ctx.beginPath();
if (typeof tl === 'undefined') {
// No rounded corners
ctx.rect(x, y, w, h);
} else {
// At least one rounded corner
// Set defaults when not specified
if (typeof tr === 'undefined') {
tr = tl;
}
if (typeof br === 'undefined') {
br = tr;
}
if (typeof bl === 'undefined') {
bl = br;
}

// corner rounding must always be positive
const absW = Math.abs(w);
const absH = Math.abs(h);
const hw = absW / 2;
const hh = absH / 2;

// Clip radii
if (absW < 2 * tl) {
tl = hw;
}
if (absH < 2 * tl) {
tl = hh;
}
if (absW < 2 * tr) {
tr = hw;
}
if (absH < 2 * tr) {
tr = hh;
}
if (absW < 2 * br) {
br = hw;
}
if (absH < 2 * br) {
br = hh;
}
if (absW < 2 * bl) {
bl = hw;
}
if (absH < 2 * bl) {
bl = hh;
}
const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.rectPrimitive(x, y, w, h, tl, tr, br, bl);
shape.endShape();
this.drawShape(shape);

ctx.roundRect(x, y, w, h, [tl, tr, br, bl]);
}
if (doFill) {
ctx.fill();
}
if (doStroke) {
ctx.stroke();
}
return this;
}


triangle(args) {
const ctx = this.drawingContext;
const doFill = !!this.states.fillColor,
doStroke = this.states.strokeColor;
const x1 = args[0],
y1 = args[1];
const x2 = args[2],
y2 = args[3];
const x3 = args[4],
y3 = args[5];
if (doFill && !doStroke) {
if (this._getFill() === styleEmpty) {
return this;
}
} else if (!doFill && doStroke) {
if (this._getStroke() === styleEmpty) {
return this;
}
}
if (this._clipping) {
const tempPath = new Path2D();
tempPath.moveTo(x1, y1);
tempPath.lineTo(x2, y2);
tempPath.lineTo(x3, y3);
tempPath.closePath();
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
if (doFill) {
ctx.fill();
}
if (doStroke) {
ctx.stroke();
}

const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.triangle(x1, y1, x2, y2, x3, y3);
shape.endShape();
this.drawShape(shape);

return this;
}
Expand Down
Loading
Loading