diff --git a/src/app/components/common/shapes/base-shape.ts b/src/app/components/common/shapes/base-shape.ts index b3c5193..b95e35c 100644 --- a/src/app/components/common/shapes/base-shape.ts +++ b/src/app/components/common/shapes/base-shape.ts @@ -1,10 +1,5 @@ import * as Konva from "konva"; -// TODO: -// Need to factor strokewidth into the size of the shape to have -// parity with the desktop version. Konva counts the stroke width separately. -// Ex: to achieve a total width of 20, radius is (20 - (2*2))/2 = 16/2 = 8 pix. -// Then 8 pix + 2 pix is 10 pix which is half the desired width. export const strokeWidth: number = 2; export enum ShapeKind { diff --git a/src/app/components/common/shapes/ellipse.ts b/src/app/components/common/shapes/ellipse.ts index 55739a4..99effe6 100644 --- a/src/app/components/common/shapes/ellipse.ts +++ b/src/app/components/common/shapes/ellipse.ts @@ -7,8 +7,8 @@ export class EllipseShape extends BaseShape { x: width / 2, y: height / 2, radius: { - x: (width - (2 * strokeWidth)) / 2, - y: (height - (2 * strokeWidth)) / 2 + x: (width - strokeWidth) / 2, + y: (height - strokeWidth) / 2 }, fill: "slateblue", stroke: "black", @@ -25,7 +25,7 @@ export class EllipseShape extends BaseShape { } public move(x: number, y: number): void { - this.instance.y(y + this.instance.radiusY()); - this.instance.x(x + this.instance.radiusX()); + this.instance.y(y + this.instance.radiusY() + strokeWidth / 2); + this.instance.x(x + this.instance.radiusX() + strokeWidth / 2); } }