The directive will initialize the object. When initializing, you should pass an empty object. When true, it will not be possible to pan the contents off the screen - it will snap back when trying to do so - and it will not be possible to zoom further out than the neutral zoom level.Ĭonstant to control how quickly the contents snap back in place after attempting to pan off bounds.Ĭonstant to control the perceived force preventing dragging the contents off limits. This overrides the initialZoomLevel, initialPanX, and initialPanY values. When defined, will initially zoom to fit the given rectangle (see API for explanation of zoom to fit). Enable if you use nested SVG and see performance problems in Chrome. In future versions, this may be set to true as default.Ĭause Chrome to use CSS transform instead of CSS zoom. This is intended to trigger hardware acceleration and may increase the speed greatly. Use translate3d for panning instead of using standard CSS styles 'left' and 'top'.
The model will be passed to the function. Pass a function to receive events when the model changes.
The lower the number, the longer time it will run.Įnable or disable pan on clicking and dragging the mouse The higher the number, the more quickly the animation will come to a stop.Ĭonstant which controls when the pan animation has slowed down enough to be terminated. Invert the behaviour of the mouse wheel (or two finger trackpad gesture)Ĭonstant which controls the friction when dragging and then letting go. It will be more chunky but will consule less CPU resources.Įnable or disable zoom in/out on mouse wheel Set to true to disable the animation while zooming. The amount of zoom levels to zoom on double clickĪmount of seconds to animate between two adjacent zoom levels 1.0 is perfect fit, lowering the number will reveal a bit of the surrounding contentsĮnable or disable zoom in on double click The initial pan in the vertical directionĪ number to indicate how closely zoom to fit will work. The initial pan in the horizontal direction
The difference in actual scale between two adjacent zoom levels. The zoom level at which the centents render at 1:1 scale Number of discrete zoom levels, each one representing a scale. The following config object attributes are supported: Name The config object is not intended to be modified once initialized. May be used to pass configuration options to the panzoom directive. The reverse operation of getViewPosition() Returns the current pixel position of this point. PanZoomService.getAPI(panzoomId).then(function (api) in the original, untransformed contents. assuming the PanZoomService to be a dependency and panzoomId to be the ID of the directive. The API of a panzoom directive, you need to look it up using the getAPI() method on the bundled PanZoomService, passing the id of the Whether or not you create it as a directive is up to you. Refer to panzoomwidget.js for an example of how this may be done. You will probably also want to position the widget above the zoomed contents be means of CSS.
Angular imageviewer zoom pan code#
I feel honored that someone with which I have no personal affiliation would go through this trouble to pull my somewhat dated code into 2018. What he did was basically salvage the good parts from angular-pan-zoom and make it work in Angular2, fixing the design along the way. I am very grateful that Tim Underhay has stepped in to correct this omission. TL DR: If you're looking for pan/zoom with Angular2 support, I highly recommend that you have a look at ng-panzoom2.Ī bit longer explanation: This directive was written for Angular1 and I have not made any effort to migrate it to Angular2. NOTE: Angular2 version has been released! AngularJS directive for implementing pan and zoom on any DOM element