Closed malangfox closed 2 years ago
This adds vue-axes which provides useAxes hook that can be used in vue 3.
useAxes
<template> <div class="App"> <div id="area" ref="area"> <div id="box" ref="box" :style="{ transform: `rotateY(${axes.rotateX.value}deg) rotateX(${axes.rotateY.value}deg)` }"></div> </div> </div> </template> <script lang="ts"> import { ref, defineComponent, onMounted } from "vue"; import { PanInput, useAxes } from "./vue-axes"; export default defineComponent({ name: "App", setup() { const area = ref(null); const axes = useAxes( { rotateX: { range: [0, 360], circular: true, startPos: 40, }, rotateY: { range: [0, 360], circular: true, startPos: 315, }, }, { deceleration: 0.0024, }); onMounted(() => { axes.connect("rotateX rotateY", new PanInput(area)); }) return { area, axes, }; }, }); </script>
The connect method part contains axes. in the readme of all frameworks.
connect
axes.
Details
This adds vue-axes which provides
useAxes
hook that can be used in vue 3.Example