An Angular 2 component allowing panning and zooming an image in a canvas element
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/world-map-example Correct 'fork me' link Mar 24, 2017
src Fixes for changes in Angular 4 which caused ng-cli AOT compilation to… Oct 23, 2017
.gitignore
.npmignore add world map example Mar 24, 2017
LICENSE initial commit Mar 23, 2017
README.md add world map example Mar 24, 2017
index.d.ts
index.js initial commit Mar 23, 2017
package.json Fixes for changes in Angular 4 which caused ng-cli AOT compilation to… Oct 23, 2017

README.md

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.

Install

npm install --save @durwella/zoomable-canvas

Usage

Import the component in your NgModule:

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

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

Include the components in your app:

<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.

License

MIT © Durwella LLC 2017