diff --git a/src/core/QROptions.ts b/src/core/QROptions.ts index 93234397..9af19fe7 100644 --- a/src/core/QROptions.ts +++ b/src/core/QROptions.ts @@ -28,6 +28,7 @@ export interface RequiredOptions extends Options { color: string; gradient?: Gradient; roundSize?: boolean; + dotScale?: number; }; backgroundOptions: { round: number; @@ -59,6 +60,7 @@ const defaultOptions: RequiredOptions = { type: "square", color: "#000", roundSize: true, + dotScale: 1, }, backgroundOptions: { round: 0, diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts index b02ee7c4..17af8862 100644 --- a/src/core/QRSVG.ts +++ b/src/core/QRSVG.ts @@ -199,7 +199,8 @@ export default class QRSVG { const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, - window: this._window + window: this._window, + dotScale: options.dotsOptions.dotScale }); this._dotsClipPath = this._window.document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); diff --git a/src/figures/dot/QRDot.ts b/src/figures/dot/QRDot.ts index abea127e..5301536f 100644 --- a/src/figures/dot/QRDot.ts +++ b/src/figures/dot/QRDot.ts @@ -6,11 +6,13 @@ export default class QRDot { _svg: SVGElement; _type: DotType; _window: Window; + _dotScale?: number; - constructor({ svg, type, window }: { svg: SVGElement; type: DotType; window: Window }) { + constructor({ svg, type, window, dotScale }: { svg: SVGElement; type: DotType; window: Window; dotScale?: number }) { this._svg = svg; this._type = type; this._window = window; + this._dotScale = dotScale; } draw(x: number, y: number, size: number, getNeighbor: GetNeighbor): void { @@ -38,7 +40,7 @@ export default class QRDot { drawFunction = this._drawSquare; } - drawFunction.call(this, { x, y, size, getNeighbor }); + drawFunction.call(this, { x, y, size, getNeighbor, dotScale: this._dotScale }); } _rotateFigure({ x, y, size, rotation = 0, draw }: RotateFigureArgs): void { @@ -161,8 +163,26 @@ export default class QRDot { this._basicDot({ x, y, size, rotation: 0 }); } - _drawSquare({ x, y, size }: DrawArgs): void { - this._basicSquare({ x, y, size, rotation: 0 }); + _drawSquare({ x, y, size, dotScale }: DrawArgs): void { + if (dotScale && dotScale !== 1) { + const scaledSize = size * dotScale; + const offset = (size - scaledSize) / 2; + this._rotateFigure({ + x: x + offset, + y: y + offset, + size: scaledSize, + rotation: 0, + draw: () => { + this._element = this._window.document.createElementNS("http://www.w3.org/2000/svg", "rect"); + this._element.setAttribute("x", String(x + offset)); + this._element.setAttribute("y", String(y + offset)); + this._element.setAttribute("width", String(scaledSize)); + this._element.setAttribute("height", String(scaledSize)); + } + }); + } else { + this._basicSquare({ x, y, size, rotation: 0 }); + } } _drawRounded({ x, y, size, getNeighbor }: DrawArgs): void { diff --git a/src/types/index.ts b/src/types/index.ts index 9f9153d4..6796f16f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -135,6 +135,7 @@ export type Options = { color?: string; gradient?: Gradient; roundSize?: boolean; + dotScale?: number; }; cornersSquareOptions?: { type?: CornerSquareType; @@ -166,6 +167,7 @@ export type DrawArgs = { size: number; rotation?: number; getNeighbor?: GetNeighbor; + dotScale?: number; }; export type BasicFigureDrawArgs = {