|
|
@@ -1,4 +1,4 @@
|
|
|
-import { PropType, computed, defineComponent, onBeforeMount, reactive } from "vue";
|
|
|
+import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, reactive } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
import icons from "./image/icons.json";
|
|
|
import { FIGNER_INSTRUMENT_DATA, IFIGNER_INSTRUMENT_Note } from "/src/view/figner-preview";
|
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
import { Howl } from "howler";
|
|
|
import { storeData } from "/src/store";
|
|
|
import { api_back } from "/src/helpers/communication";
|
|
|
-import { Button, Icon } from "vant";
|
|
|
+import Hammer from "hammerjs";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "viewFigner",
|
|
|
@@ -35,6 +35,15 @@ export default defineComponent({
|
|
|
soundFonts: {} as any,
|
|
|
viewIndex: 0,
|
|
|
noteAudio: null as unknown as Howl,
|
|
|
+ transform: {
|
|
|
+ scale: 1,
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ startScale: 1,
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ transition: "",
|
|
|
+ },
|
|
|
});
|
|
|
const fingerData = reactive({
|
|
|
relationshipIndex: 0,
|
|
|
@@ -108,6 +117,54 @@ export default defineComponent({
|
|
|
api_back();
|
|
|
};
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ loadElement();
|
|
|
+ });
|
|
|
+ const loadElement = () => {
|
|
|
+ const fingeringContainer = document.getElementById("fingeringContainer");
|
|
|
+ // console.log("🚀 ~ fingeringContainer:", fingeringContainer);
|
|
|
+ const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
|
|
|
+ mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
|
|
+ mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get("pan")]);
|
|
|
+ // mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
|
|
|
+ // mc.get("pinch").set({ enable: true });
|
|
|
+ mc.on("panstart pinchstart", function (ev) {
|
|
|
+ data.transform.transition = "";
|
|
|
+ });
|
|
|
+ mc.on("panmove pinchmove", function (ev) {
|
|
|
+ if (ev.type === "pinchmove") {
|
|
|
+ // console.log("🚀 ~ ev:", ev.type, ev.scale, ev.deltaX, ev.deltaY);
|
|
|
+ data.transform.scale = ev.scale * data.transform.startScale;
|
|
|
+ data.transform.x = data.transform.startX + ev.deltaX;
|
|
|
+ data.transform.y = data.transform.startY + ev.deltaY;
|
|
|
+ }
|
|
|
+ if (ev.type === "panmove") {
|
|
|
+ // console.log("🚀 ~ ev:", ev.type, ev.deltaX, ev.deltaY);
|
|
|
+ data.transform.x = data.transform.startX + ev.deltaX;
|
|
|
+ data.transform.y = data.transform.startY + ev.deltaY;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //
|
|
|
+ mc.on("hammer.input", function (ev) {
|
|
|
+ // console.log("🚀 ~ ev:", ev.type, ev.isFinal);
|
|
|
+ if (ev.isFinal) {
|
|
|
+ data.transform.startScale = data.transform.scale;
|
|
|
+ data.transform.startX = data.transform.x;
|
|
|
+ data.transform.startY = data.transform.y;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const resetElement = () => {
|
|
|
+ data.transform.transition = "all 0.3s";
|
|
|
+ nextTick(() => {
|
|
|
+ data.transform.scale = 1;
|
|
|
+ data.transform.x = 0;
|
|
|
+ data.transform.y = 0;
|
|
|
+ data.transform.startScale = 1;
|
|
|
+ data.transform.startX = 0;
|
|
|
+ data.transform.startY = 0;
|
|
|
+ });
|
|
|
+ };
|
|
|
return () => {
|
|
|
const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
|
|
|
const rs: number[] = Array.isArray(relationship[1])
|
|
|
@@ -140,18 +197,24 @@ export default defineComponent({
|
|
|
)}
|
|
|
</div>
|
|
|
<div class={styles.rightBtn}>
|
|
|
- <div class={[styles.item, styles.disabled]}>
|
|
|
+ <div class={[styles.item]} onClick={() => resetElement()}>
|
|
|
<img src={icons.icon_2_0} />
|
|
|
<span>还原</span>
|
|
|
</div>
|
|
|
- <div class={[styles.item, styles.disabled]}>
|
|
|
+ <div class={[styles.item]}>
|
|
|
<img src={icons.icon_2_1} />
|
|
|
<span>小技巧</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class={styles.fingerContent}>
|
|
|
- <div class={[styles.fingeringContainer]}>
|
|
|
+ <div id="fingeringContainer" class={styles.fingerContent}>
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ transform: `translate3d(${data.transform.x}px,${data.transform.y}px,0px) scale(${data.transform.scale})`,
|
|
|
+ transition: data.transform.transition,
|
|
|
+ }}
|
|
|
+ class={[styles.fingeringContainer]}
|
|
|
+ >
|
|
|
<div class={styles.imgs}>
|
|
|
<img src={fingerData.subject?.json?.full} />
|
|
|
{rs.map((key: number | string, index: number) => {
|
|
|
@@ -179,11 +242,7 @@ export default defineComponent({
|
|
|
{data.notes.map((note: IFIGNER_INSTRUMENT_Note) => {
|
|
|
const steps = new Array(Math.abs(note.step)).fill(1);
|
|
|
return (
|
|
|
- <div
|
|
|
- draggable={false}
|
|
|
- class={styles.note}
|
|
|
- onClick={() => noteClick(note)}
|
|
|
- >
|
|
|
+ <div draggable={false} class={styles.note} onClick={() => noteClick(note)}>
|
|
|
{data.realKey === note.realKey ? (
|
|
|
<img draggable={false} src={icons.icon_btn_ylow} />
|
|
|
) : (
|
