javascript - mwlresizable doesn't work - Stack Overflow

admin管理员组

文章数量:1343287

I am trying to resize a picture, but on mouse up, the picture just moves to the new position without resizing.

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

ponent.ts:

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

export class Component{

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

app.module:

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


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

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

I did everything by the book

I am trying to resize a picture, but on mouse up, the picture just moves to the new position without resizing.

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

ponent.ts:

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

export class Component{

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

app.module:

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


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

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

I did everything by the book

• javascript
• angular
• dynamic
• resize

Share Improve this question Follow edited Apr 14, 2018 at 9:59 David Walschots 12.7k55 gold badges3838 silver badges5959 bronze badges asked Apr 13, 2018 at 15:59 Yarden SaadaYarden Saada 13611 silver badge44 bronze badges 2

• 1 Please provide a MCVE. – Iavor Commented Apr 13, 2018 at 16:05
• 1 @lavor Just updated the question to more details – Yarden Saada Commented Apr 13, 2018 at 16:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

In case its still useful for anyone. You need to apply width and height in onResizeEnd function:

Change ponent code to this:

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`
      };
  }
}

Change HTML code to this:

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

本文标签： javascriptmwlresizable doesn39t workStack Overflow