Angular 2+的图像平移和缩放库

Angular 2+的图像平移和缩放库
插件名称 zoomable-canvas
发布时间 2020年7月28日
插件作者 Durwella

一个Angular 2组件,允许平移和缩放canvas元素中的图像。该组件允许使用鼠标来平移和缩放承载HtmlImageElement的HTML5 <canvas>元素。该组件还提供双向绑定,以编程方式进行平移和缩放。

安装:

npm install –save @durwella/zoomable-canvas

使用:

将组件导入您的NgModule

import { ZoomableCanvasComponent } from '@durwella/zoomable-canvas';

@NgModule({
    ...
    declarations: [
        ...
        ZoomableCanvasComponent
    ],
    ...
})
export class AppModule {
}

在您的应用程序中包含组件:

<zoomable-canvas 
    [image]="image"
    (topChange)="top = $event" (bottomChange)="bottom = $event" 
    (leftChange)="left = $event" (rightChange)="right = $event"
    [(centerX)]="centerX" [(centerY)]="centerY"
    [(zoomLevel)]="zoomLevel" [maxZoom]="maxZoom" [minZoom]="0"
    (canvasWidthChange)="canvasWidth = $event" (canvasHeightChange)="canvasHeight = $event"
></zoomable-canvas>