Skip to content

Commit a09817a

Browse files
AmoebaChantKevBrown-MSFT
AmoebaChant
and
KevBrown-MSFT
authored
GUI 2D: Fix shadowOffsetX and shadowOffsetY to respect adaptive scaling (#17377)
Co-authored-by: AmoebaChant <[email protected]>
1 parent d8d976a commit a09817a

File tree

14 files changed

+37
-36
lines changed

14 files changed

+37
-36
lines changed

‎packages/dev/gui/src/2D/controls/checkbox.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@ export class Checkbox extends Control {
113113
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
114114
context.shadowColor = this.shadowColor;
115115
context.shadowBlur = this.shadowBlur;
116-
context.shadowOffsetX = this.shadowOffsetX;
117-
context.shadowOffsetY = this.shadowOffsetY;
116+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
117+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
118118
}
119119

120120
context.fillStyle = this._isEnabled ? this._background : this._disabledColor;

‎packages/dev/gui/src/2D/controls/colorpicker.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,8 +306,8 @@ export class ColorPicker extends Control {
306306
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
307307
context.shadowColor = this.shadowColor;
308308
context.shadowBlur = this.shadowBlur;
309-
context.shadowOffsetX = this.shadowOffsetX;
310-
context.shadowOffsetY = this.shadowOffsetY;
309+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
310+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
311311

312312
context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
313313
}

‎packages/dev/gui/src/2D/controls/container.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -365,8 +365,8 @@ export class Container extends Control {
365365
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
366366
context.shadowColor = this.shadowColor;
367367
context.shadowBlur = this.shadowBlur;
368-
context.shadowOffsetX = this.shadowOffsetX;
369-
context.shadowOffsetY = this.shadowOffsetY;
368+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
369+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
370370
}
371371

372372
context.fillStyle = this._getBackgroundColor(context);

‎packages/dev/gui/src/2D/controls/control.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ export class Control implements IAnimatable, IFocusableControl {
227227
private _cacheData: Nullable<ImageData>;
228228

229229
private _shadowOffsetX = 0;
230-
/** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
230+
/** Gets or sets a value indicating the offset in pixels to apply on X axis to render the shadow */
231231
@serialize()
232232
public get shadowOffsetX() {
233233
return this._shadowOffsetX;
@@ -243,7 +243,7 @@ export class Control implements IAnimatable, IFocusableControl {
243243
}
244244

245245
private _shadowOffsetY = 0;
246-
/** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
246+
/** Gets or sets a value indicating the offset in pixels to apply on Y axis to render the shadow */
247247
@serialize()
248248
public get shadowOffsetY() {
249249
return this._shadowOffsetY;
@@ -1743,8 +1743,8 @@ export class Control implements IAnimatable, IFocusableControl {
17431743
Measure.CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
17441744

17451745
// Expand rect based on shadows
1746-
const shadowOffsetX = this.shadowOffsetX;
1747-
const shadowOffsetY = this.shadowOffsetY;
1746+
const shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
1747+
const shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
17481748
const shadowBlur = Math.max(this._previousShadowBlur, this.shadowBlur);
17491749

17501750
const leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
@@ -2179,8 +2179,8 @@ export class Control implements IAnimatable, IFocusableControl {
21792179
}
21802180

21812181
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
2182-
const shadowOffsetX = this.shadowOffsetX;
2183-
const shadowOffsetY = this.shadowOffsetY;
2182+
const shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
2183+
const shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
21842184
const shadowBlur = this.shadowBlur;
21852185

21862186
const leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);

‎packages/dev/gui/src/2D/controls/ellipse.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ export class Ellipse extends Container {
5959
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
6060
context.shadowColor = this.shadowColor;
6161
context.shadowBlur = this.shadowBlur;
62-
context.shadowOffsetX = this.shadowOffsetX;
63-
context.shadowOffsetY = this.shadowOffsetY;
62+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
63+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
6464
}
6565

6666
Control.drawEllipse(

‎packages/dev/gui/src/2D/controls/image.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -961,8 +961,8 @@ export class Image extends Control {
961961
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
962962
context.shadowColor = this.shadowColor;
963963
context.shadowBlur = this.shadowBlur;
964-
context.shadowOffsetX = this.shadowOffsetX;
965-
context.shadowOffsetY = this.shadowOffsetY;
964+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
965+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
966966
}
967967

968968
let x, y, width, height;

‎packages/dev/gui/src/2D/controls/inputText.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -879,8 +879,8 @@ export class InputText extends Control {
879879
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
880880
context.shadowColor = this.shadowColor;
881881
context.shadowBlur = this.shadowBlur;
882-
context.shadowOffsetX = this.shadowOffsetX;
883-
context.shadowOffsetY = this.shadowOffsetY;
882+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
883+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
884884
}
885885

886886
// Background

‎packages/dev/gui/src/2D/controls/inputTextArea.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -699,8 +699,8 @@ export class InputTextArea extends InputText {
699699
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
700700
context.shadowColor = this.shadowColor;
701701
context.shadowBlur = this.shadowBlur;
702-
context.shadowOffsetX = this.shadowOffsetX;
703-
context.shadowOffsetY = this.shadowOffsetY;
702+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
703+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
704704
}
705705

706706
if (this.outlineWidth) {
@@ -787,8 +787,8 @@ export class InputTextArea extends InputText {
787787
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
788788
context.shadowColor = this.shadowColor;
789789
context.shadowBlur = this.shadowBlur;
790-
context.shadowOffsetX = this.shadowOffsetX;
791-
context.shadowOffsetY = this.shadowOffsetY;
790+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
791+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
792792
}
793793

794794
// Background

‎packages/dev/gui/src/2D/controls/line.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,8 @@ export class Line extends Control {
187187
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
188188
context.shadowColor = this.shadowColor;
189189
context.shadowBlur = this.shadowBlur;
190-
context.shadowOffsetX = this.shadowOffsetX;
191-
context.shadowOffsetY = this.shadowOffsetY;
190+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
191+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
192192
}
193193

194194
this._applyStates(context);

‎packages/dev/gui/src/2D/controls/multiLine.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,8 @@ export class MultiLine extends Control {
183183
if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
184184
context.shadowColor = this.shadowColor;
185185
context.shadowBlur = this.shadowBlur;
186-
context.shadowOffsetX = this.shadowOffsetX;
187-
context.shadowOffsetY = this.shadowOffsetY;
186+
context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
187+
context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
188188
}
189189

190190
this._applyStates(context);

0 commit comments

Comments
 (0)