![ngx]( "ngx")
本文介绍了放大&缩小 Angular 不适用于 ngx-image-cropper的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试放大 &从 ngx-image-cropper 缩小.我没有收到任何错误，但是当我单击 zoomOut 或 ZoomIn 按钮时，它不起作用.
我在这里做错了什么?
我的 TS 代码
zoomOut() {this.scale -= .1;this.transform = {...this.transform,规模:this.scale};}放大() {this.scale += .1;this.transform = {...this.transform,规模:this.scale};}
我的 HTML 代码
解决方案
export class AppComponent {缩放:布尔=假；缩小(){this.zoom=false;}放大(){this.zoom=true;}获取高度(){if(this.zoom==true){返回'500px'；//以像素或百分比形式返回您的期望值}别的{返回'200px'；}}}
button{填充:8px；}#测试缩放{高度:500px；宽度:100%；位置:相对；背景:红色；}.zoom-card{高度:500px；宽度:90%；位置:相对；保证金:自动；背景:石灰；}.测试图像{宽度:自动；}
<div class="zoom-card"><img [ngStyle]="{'height':getheight()}" width="auto" class="test-image" src="https://www.netcetra.com/images/howto_images/photoshop-logo.jpg"><br><按钮(点击)="zoomIn()" >放大</button><button (click)="zoomOut()" >缩小</button>
</section>
使用此代码并将其粘贴到 app.component.ts、CSS 和 HTML 文件中.
I am trying for Zoom in & Zoom out from ngx-image-cropper. I am not getting any error but when I click the button zoomOut or ZoomIn it's not working.
What am I doing wrong here?
My TS code
zoomOut() {
this.scale -= .1;
this.transform = {
...this.transform,
scale: this.scale
};
}
zoomIn() {
this.scale += .1;
this.transform = {
...this.transform,
scale: this.scale
};
}
My HTML code
<button class="btn zoomIn" (click)="zoomIn()" tooltip="Zoom In" data-toggle="tooltip" data-placement="top" title="Zoom In"></button>
<button class="btn zoomOut" (click)="zoomOut()" tooltip="Zoom Out" data-toggle="tooltip" data-placement="top" title="Zoom Out"></button>
解决方案
export class AppComponent {
zoom:boolean=false;
zoomOut(){
this.zoom=false;
}
zoomIn(){
this.zoom=true;
}
getheight(){
if(this.zoom==true){
return '500px';
//return your desiderd value in pixel or in percentage
}
else{
return '200px';
}
}
}
button{
padding: 8px;
}
#test-zoom{
height: 500px;
width: 100%;
position: relative;
background: red;
}
.zoom-card{
height: 500px;
width: 90%;
position: relative;
margin: auto;
background: lime;
}
.test-image{
width: auto;
}
<section id="test-zoom">
<div class="zoom-card">
<img [ngStyle]="{'height':getheight()}" width="auto" class="test-image" src="https://www.netcetra.com/images/howto_images/photoshop-logo.jpg">
<br>
<button (click)="zoomIn()" >Zoom In</button>
<button (click)="zoomOut()" >Zoom Out</button>
</div>
</section>
Use this code and paste it into app.component.ts, CSS, and HTML files.
这篇关于放大&缩小 Angular 不适用于 ngx-image-cropper的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！