Skip to content

Commit

Permalink
Remove nextRoundedRectBehavior and nextLineHeightBehavior (pixijs#8501)
Browse files Browse the repository at this point in the history
  • Loading branch information
bigtimebuddy committed Jul 18, 2022
1 parent 7c94608 commit 0a986ca
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 170 deletions.
6 changes: 0 additions & 6 deletions packages/graphics/src/Graphics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,6 @@ export interface Graphics extends GlobalMixins.Graphics, Container {}
*/
export class Graphics extends Container
{
/**
* New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves.
* In the next major release, we'll enable this by default.
*/
public static nextRoundedRectBehavior = false;

/**
* Temporary point to use for containsPoint.
* @private
Expand Down
157 changes: 2 additions & 155 deletions packages/graphics/src/utils/buildRoundedRectangle.ts
Original file line number Diff line number Diff line change
@@ -1,87 +1,7 @@
import { earcut } from '@pixi/utils';

// for type only
import type { IShapeBuildCommand } from './IShapeBuildCommand';
import type { RoundedRectangle } from '@pixi/math';
import { Graphics } from '../Graphics';
import { buildCircle } from './buildCircle';

/**
* Calculate a single point for a quadratic bezier curve.
* Utility function used by quadraticBezierCurve.
* Ignored from docs since it is not directly exposed.
* @ignore
* @private
* @param {number} n1 - first number
* @param {number} n2 - second number
* @param {number} perc - percentage
* @returns {number} the result
*/
function getPt(n1: number, n2: number, perc: number): number
{
const diff = n2 - n1;

return n1 + (diff * perc);
}

/**
* Calculate the points for a quadratic bezier curve. (helper function..)
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
*
* Ignored from docs since it is not directly exposed.
* @ignore
* @private
* @param {number} fromX - Origin point x
* @param {number} fromY - Origin point x
* @param {number} cpX - Control point x
* @param {number} cpY - Control point y
* @param {number} toX - Destination point x
* @param {number} toY - Destination point y
* @param {number[]} [out=[]] - The output array to add points into. If not passed, a new array is created.
* @returns {number[]} an array of points
*/
function quadraticBezierCurve(
fromX: number, fromY: number,
cpX: number, cpY: number,
toX: number, toY: number,
out: Array<number> = []): Array<number>
{
const n = 20;
const points = out;

let xa = 0;
let ya = 0;
let xb = 0;
let yb = 0;
let x = 0;
let y = 0;

for (let i = 0, j = 0; i <= n; ++i)
{
j = i / n;

// The Green Line
xa = getPt(fromX, cpX, j);
ya = getPt(fromY, cpY, j);
xb = getPt(cpX, toX, j);
yb = getPt(cpY, toY, j);

// The Black Dot
x = getPt(xa, xb, j);
y = getPt(ya, yb, j);

// Handle case when first curve points overlaps and earcut fails to triangulate
if (i === 0 && points[points.length - 2] === x && points[points.length - 1] === y)
{
continue;
}

points.push(x, y);
}

return points;
}

/**
* Builds a rounded rectangle to draw
*
Expand All @@ -96,84 +16,11 @@ export const buildRoundedRectangle: IShapeBuildCommand = {

build(graphicsData)
{
if (Graphics.nextRoundedRectBehavior)
{
buildCircle.build(graphicsData);

return;
}

const rrectData = graphicsData.shape as RoundedRectangle;
const points = graphicsData.points;
const x = rrectData.x;
const y = rrectData.y;
const width = rrectData.width;
const height = rrectData.height;

// Don't allow negative radius or greater than half the smallest width
const radius = Math.max(0, Math.min(rrectData.radius, Math.min(width, height) / 2));

points.length = 0;

// No radius, do a simple rectangle
if (!radius)
{
points.push(x, y,
x + width, y,
x + width, y + height,
x, y + height);
}
else
{
quadraticBezierCurve(x, y + radius,
x, y,
x + radius, y,
points);
quadraticBezierCurve(x + width - radius,
y, x + width, y,
x + width, y + radius,
points);
quadraticBezierCurve(x + width, y + height - radius,
x + width, y + height,
x + width - radius, y + height,
points);
quadraticBezierCurve(x + radius, y + height,
x, y + height,
x, y + height - radius,
points);
}
buildCircle.build(graphicsData);
},

triangulate(graphicsData, graphicsGeometry)
{
if (Graphics.nextRoundedRectBehavior)
{
buildCircle.triangulate(graphicsData, graphicsGeometry);

return;
}

const points = graphicsData.points;

const verts = graphicsGeometry.points;
const indices = graphicsGeometry.indices;

const vecPos = verts.length / 2;

const triangles = earcut(points, null, 2);

for (let i = 0, j = triangles.length; i < j; i += 3)
{
indices.push(triangles[i] + vecPos);
// indices.push(triangles[i] + vecPos);
indices.push(triangles[i + 1] + vecPos);
// indices.push(triangles[i + 2] + vecPos);
indices.push(triangles[i + 2] + vecPos);
}

for (let i = 0, j = points.length; i < j; i++)
{
verts.push(points[i], points[++i]);
}
buildCircle.triangulate(graphicsData, graphicsGeometry);
},
};
10 changes: 1 addition & 9 deletions packages/text/src/Text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,6 @@ interface ModernContext2D extends CanvasRenderingContext2D
*/
export class Text extends Sprite
{
/**
* New behavior for `lineHeight` that's meant to mimic HTML text. A value of `true` will
* make sure the first baseline is offset by the `lineHeight` value if it is greater than `fontSize`.
* A value of `false` will use the legacy behavior and not change the baseline of the first line.
* In the next major release, we'll enable this by default.
*/
public static nextLineHeightBehavior = false;

/**
* New rendering behavior for letter-spacing which uses Chrome's new native API. This will
* lead to more accurate letter-spacing results because it does not try to manually draw
Expand Down Expand Up @@ -263,7 +255,7 @@ export class Text extends Sprite

let linePositionYShift = (lineHeight - fontProperties.fontSize) / 2;

if (!Text.nextLineHeightBehavior || lineHeight - fontProperties.fontSize < 0)
if (lineHeight - fontProperties.fontSize < 0)
{
linePositionYShift = 0;
}
Expand Down

0 comments on commit 0a986ca

Please sign in to comment.