Skip to content

Commit

Permalink
fix: draw circle
Browse files Browse the repository at this point in the history
  • Loading branch information
zhiqingchen committed Nov 6, 2024
1 parent c2d523d commit cbc3be9
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 13 deletions.
46 changes: 33 additions & 13 deletions src/skia/SkiaPathRebuilder.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { PathRebuilder } from 'zrender/lib/core/PathProxy';
import { SkPath, Skia } from '@shopify/react-native-skia';
import { isAroundZero } from './helper';

const PI = Math.PI;
const PI2 = Math.PI * 2;
export default class SkiaPathRebuilder implements PathRebuilder {
private path: SkPath;

Expand Down Expand Up @@ -50,24 +53,41 @@ export default class SkiaPathRebuilder implements PathRebuilder {
rotation: number,
startAngle: number,
endAngle: number,
counterclockwise: boolean = false
anticlockwise: boolean = false
) {
const useSmallArc = Math.abs(endAngle - startAngle) <= Math.PI;
let dTheta = endAngle - startAngle;
const clockwise = !anticlockwise;

const dThetaPositive = Math.abs(dTheta);
const isCircle =
isAroundZero(dThetaPositive - PI2) ||
(clockwise ? dTheta >= PI2 : -dTheta >= PI2);

const useSmallArc = Math.abs(endAngle - startAngle) <= PI;

const endX = x + radiusX * Math.cos(endAngle);
const endY = y + radiusY * Math.sin(endAngle);

const xAxisRotateInDegrees = (rotation * 180) / Math.PI;

this.path.arcToRotated(
radiusX,
radiusY,
xAxisRotateInDegrees,
useSmallArc,
counterclockwise,
endX,
endY
);
const xAxisRotateInDegrees = (rotation * 180) / PI;
if (isCircle) {
const ovalRect = {
x: x - radiusX,
y: y - radiusY,
width: radiusX * 2,
height: radiusY * 2,
};
this.path.addOval(ovalRect, anticlockwise);
} else {
this.path.arcToRotated(
radiusX,
radiusY,
xAxisRotateInDegrees,
useSmallArc,
anticlockwise,
endX,
endY
);
}
}

rect(x: number, y: number, width: number, height: number): void {
Expand Down
4 changes: 4 additions & 0 deletions src/skia/helper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const EPSILON = 1e-4;
export function isAroundZero(transform: number) {
return transform < EPSILON && transform > -EPSILON;

Check failure on line 3 in src/skia/helper.ts

View workflow job for this annotation

GitHub Actions / lint

Delete `··`
}

Check failure on line 4 in src/skia/helper.ts

View workflow job for this annotation

GitHub Actions / lint

Insert `⏎`

0 comments on commit cbc3be9

Please sign in to comment.