Comments (1)
mistabiggx
commented on June 2, 2024
First, the documentation/library you're referring to has no relationship with this library. The base library is https://github.com/anvaka/panzoom
Looking at your fiddle, you're on the right path to implementing the beforeWheel option, but you have to move the handler to a method.
Therefore your code
<panZoom
height="100%"
width="100%"
ref="panZoom"
selector="#zoomable"
id="canvasContainer"
:options="{ autocenter: true,
bounds: false,
minZoom: 0.5,
maxZoom: 3,
smoothScroll: false,
transformOrigin: {x: 0, y: 0},
zoomDoubleClickSpeed: 1,
beforeWheel: function() {
return true
}}"
>
<div id="zoomable">
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
</div>
<div class="not-zoomable others">I am not zoomable</div>
</panZoom>
Should become
<panZoom
height="100%"
width="100%"
ref="panZoom"
selector="#zoomable"
id="canvasContainer"
:options="{ autocenter: true,
bounds: false,
minZoom: 0.5,
maxZoom: 3,
smoothScroll: false,
transformOrigin: {x: 0, y: 0},
zoomDoubleClickSpeed: 1,
beforeWheel: beforeWheelHandler}"
>
<div id="zoomable">
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
</div>
<div class="not-zoomable others">I am not zoomable</div>
</panZoom>
And then in your methods, create the beforeWheelHandler
methods: {
beforeWheelHandler(e) {
var shouldIgnore = !e.altKey;
return shouldIgnore;
}
}
You should also update the library to the latest version.
from vue-panzoom.
Related Issues (20)
- Update panzoom version to 9.4.0 HOT 2
- Use locally in component HOT 1
- How to zoom around mouse position HOT 2
- [QUESTION] How to use with nuxt? HOT 2
- warning in ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js HOT 4
- Failed to mount component: template or render function not defined. HOT 3
- prototype is not defined for vue3 (with inertia.js) HOT 4
- How can i pause and resume panzoom in vue?
- Add Typescript support HOT 1
- latest version breaks
- 1.1.6 breaks Nuxt
- Panning is too sensitive on Google Chrome
- Pinch to Zoom on Mobile HOT 1
- Unhandled error during execution of mounted hook HOT 3
- Vue 3 / Quasar use
- Remove tranformOrigin from defaults
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on') HOT 2
- Error initializing vue-panzoom vue 3 HOT 2
- v1.1.6 does not work with vue 3.2.45 HOT 3
- reading 'on' problem
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-panzoom.