zoomable-canvas

KO | EN

gitlite — search

#javascript #python #ai #go #golang #android #machine-learning #rust #deep-learning #docker #awesome #kubernetes #awesome-list #ios

zoomable-canvas

(★ 12)

An Angular 2 component allowing panning and zooming an image in a canvas element

zoomable-canvas 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# zoomable-canvas

> An Angular 2 component allowing panning and zooming an image in a canvas element

A `<canvas>` element hosting an `HtmlImageElement` which can be panned and zoomed using the mouse.

This component also provides two-way bindings for panning and zooming programmatically.  For an example of the component in action, see the [example page](https://durwella.github.io/zoomable-canvas/).

## Install

```
npm install --save @durwella/zoomable-canvas
```

## Usage
Import the component in your `NgModule`:

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

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

Include the components in your app:

```html
<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>
```

## Contribute
Pull requests accepted.

zoomable-canvas

zoomable-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

zoomable-canvas

zoomable-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README