javascript - mwlresizable 不起作用

Question

我正在尝试调整图片大小，但在鼠标松开时，图片只是移动到新位置而没有调整大小。

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}">

组件.ts:

import { ResizeEvent } from "angular-resizable-element";

export class Component{

  onResizeEnd(event: ResizeEvent): void {
    console.log('Element was resized', event);
  }
}

应用程序模块:

...
import {ResizableModule} from "angular-resizable-element";


@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,

    HttpClientModule,
    AngularDraggableModule,
    ResizableModule
  ],
  providers: [GetJsonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我都是按照书做的

Answer 1

以防它对任何人仍然有用。您需要在 onResizeEnd 函数中应用宽度和高度:

将组件代码更改为:

import { ResizeEvent } from "angular-resizable-element";

export class Component{
   style: {};
   onResizeEnd(event: ResizeEvent): void {
      this.style = {
        width: `${event.rectangle.width}px`,
        height: `${event.rectangle.height}px`
      };
  }
}

将 HTML 代码更改为:

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}" [ngStyle]="style">