diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md
index b6902970484..f8dd1da3bcb 100644
--- a/components/image/doc/index.en-US.md
+++ b/components/image/doc/index.en-US.md
@@ -61,6 +61,8 @@ Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem
| nzZoom | Zoom rate | `number` | 1 |
| nzRotate | Rotate rate | `number` | 0 |
| nzScaleStep | `1 + nzScaleStep` is the step to increase or decrease the scale | `number` | 0.5 |
+| nzFlipHorizontally | Flip image on horizontal vector | `boolean` | `false` |
+| nzFlipVertically | Flip image on vertical vector | `boolean` | `false` |
### NzImagePreviewRef
diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md
index 66337b777a7..9723a1823f3 100644
--- a/components/image/doc/index.zh-CN.md
+++ b/components/image/doc/index.zh-CN.md
@@ -62,6 +62,8 @@ import { NzImageModule } from 'ng-zorro-antd/image';
| nzZoom | 缩放比例 | `number` | 1 |
| nzRotate | 旋转角度 | `number` | 0 |
| nzScaleStep | `1 + nzScaleStep` 为缩放放大的每步倍数 | `number` | 0.5 |
+| nzFlipHorizontally | 在水平向量上翻转图像 | `boolean` | `false` |
+| nzFlipVertically | 在垂直向量上翻转图像 | `boolean` | `false` |
### NzImagePreviewRef
diff --git a/components/image/image-preview-options.ts b/components/image/image-preview-options.ts
index 809a5ce4dea..a747b9cbd40 100644
--- a/components/image/image-preview-options.ts
+++ b/components/image/image-preview-options.ts
@@ -13,6 +13,8 @@ export class NzImagePreviewOptions {
nzZIndex?: number;
nzZoom?: number;
nzRotate?: number;
+ nzFlipHorizontally?: boolean;
+ nzFlipVertically?: boolean;
nzScaleStep?: number;
nzDirection?: Direction;
}
diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
index ee4d08a1e03..aa83c164af6 100644
--- a/components/image/image-preview.component.ts
+++ b/components/image/image-preview.component.ts
@@ -37,7 +37,7 @@ import { getClientSize, getFitContentPosition, getOffset } from './utils';
export interface NzImageContainerOperation {
icon: string;
type: string;
-
+ rotate?: number;
onClick(): void;
}
@@ -67,7 +67,13 @@ const NZ_DEFAULT_ROTATE = 0;
[class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
(click)="option.onClick()"
>
-
+
}
@@ -185,6 +191,21 @@ export class NzImagePreviewComponent implements OnInit {
this.onRotateLeft();
},
type: 'rotateLeft'
+ },
+ {
+ icon: 'swap',
+ onClick: () => {
+ this.onHorizontalFlip();
+ },
+ type: 'flipHorizontally'
+ },
+ {
+ icon: 'swap',
+ onClick: () => {
+ this.onVerticalFlip();
+ },
+ type: 'flipVertically',
+ rotate: 90
}
];
@@ -200,6 +221,8 @@ export class NzImagePreviewComponent implements OnInit {
private zoom: number;
private rotate: number;
private scaleStep: number;
+ private flipHorizontally: boolean;
+ private flipVertically: boolean;
get animationDisabled(): boolean {
return this.config.nzNoAnimation ?? false;
@@ -223,6 +246,8 @@ export class NzImagePreviewComponent implements OnInit {
this.zoom = this.config.nzZoom ?? this._defaultNzZoom;
this.scaleStep = this.config.nzScaleStep ?? this._defaultNzScaleStep;
this.rotate = this.config.nzRotate ?? this._defaultNzRotate;
+ this.flipHorizontally = this.config.nzFlipHorizontally ?? false;
+ this.flipVertically = this.config.nzFlipVertically ?? false;
this.updateZoomOutDisabled();
this.updatePreviewImageTransform();
this.updatePreviewImageWrapperTransform();
@@ -329,6 +354,16 @@ export class NzImagePreviewComponent implements OnInit {
this.next();
}
+ onHorizontalFlip(): void {
+ this.flipHorizontally = !this.flipHorizontally;
+ this.updatePreviewImageTransform();
+ }
+
+ onVerticalFlip(): void {
+ this.flipVertically = !this.flipVertically;
+ this.updatePreviewImageTransform();
+ }
+
onAnimationStart(event: AnimationEvent): void {
if (event.toState === 'enter') {
this.setEnterAnimationClass();
@@ -379,7 +414,9 @@ export class NzImagePreviewComponent implements OnInit {
}
private updatePreviewImageTransform(): void {
- this.previewImageTransform = `scale3d(${this.zoom}, ${this.zoom}, 1) rotate(${this.rotate}deg)`;
+ this.previewImageTransform = `scale3d(${this.zoom * (this.flipHorizontally ? -1 : 1)}, ${
+ this.zoom * (this.flipVertically ? -1 : 1)
+ }, 1) rotate(${this.rotate}deg)`;
}
private updatePreviewImageWrapperTransform(): void {
@@ -416,6 +453,8 @@ export class NzImagePreviewComponent implements OnInit {
this.zoom = this.config.nzZoom ?? this._defaultNzZoom;
this.scaleStep = this.config.nzScaleStep ?? this._defaultNzScaleStep;
this.rotate = this.config.nzRotate ?? this._defaultNzRotate;
+ this.flipHorizontally = false;
+ this.flipVertically = false;
this.position = { ...initialPosition };
}
}
diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts
index 9575e62a6d0..928f0f95cec 100644
--- a/components/image/image.spec.ts
+++ b/components/image/image.spec.ts
@@ -25,7 +25,8 @@ import {
RotateLeftOutline,
RotateRightOutline,
ZoomInOutline,
- ZoomOutOutline
+ ZoomOutOutline,
+ SwapOutline
} from '@ant-design/icons-angular/icons';
import { NzConfigService } from 'ng-zorro-antd/core/config';
@@ -206,7 +207,8 @@ describe('Preview', () => {
LeftCircleOutline,
RotateLeftOutline,
RotateRightOutline,
- CloseCircleOutline
+ CloseCircleOutline,
+ SwapOutline
]
}
]
@@ -289,7 +291,7 @@ describe('Preview', () => {
});
describe('ImagePreview', () => {
- it('should rotate, zoom and close work', fakeAsync(() => {
+ it('should rotate, zoom and close and flip work', fakeAsync(() => {
context.firstSrc = QUICK_SRC;
fixture.detectChanges();
const image = debugElement.nativeElement.querySelector('img');
@@ -303,6 +305,8 @@ describe('Preview', () => {
const zoomOut = operations[2];
const rotateRight = operations[3];
const rotateLeft = operations[4];
+ const flipHorizontally = operations[5];
+ const flipVertically = operations[6];
dispatchFakeEvent(rotateLeft, 'click');
tickChanges();
expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(1, 1, 1) rotate(-90deg)');
@@ -315,6 +319,12 @@ describe('Preview', () => {
dispatchFakeEvent(zoomOut, 'click');
tickChanges();
expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(1, 1, 1) rotate(0deg)');
+ dispatchFakeEvent(flipHorizontally, 'click');
+ expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(-1, 1, 1) rotate(0deg)');
+ tickChanges();
+ dispatchFakeEvent(flipVertically, 'click');
+ expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(-1, -1, 1) rotate(0deg)');
+ tickChanges();
dispatchFakeEvent(close, 'click');
tickChanges();
previewElement = getPreviewElement();