|
@@ -40,17 +40,23 @@ export default defineComponent({
|
|
type: Object as PropType<HTMLImageElement>,
|
|
type: Object as PropType<HTMLImageElement>,
|
|
required: true,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
+ sliceImage: {
|
|
|
|
+ type: Object as PropType<HTMLImageElement>,
|
|
|
|
+ required: true,
|
|
|
|
+ },
|
|
|
|
+ dx: { type: Number, required: true },
|
|
|
|
+ dy: { type: Number, required: true },
|
|
},
|
|
},
|
|
- setup({ trackList, originalImage }) {
|
|
|
|
|
|
+ setup({ trackList, originalImage, sliceImage, dx, dy }) {
|
|
const focusedTrack = (track: Track) => {
|
|
const focusedTrack = (track: Track) => {
|
|
return store.focusTracks.includes(track);
|
|
return store.focusTracks.includes(track);
|
|
};
|
|
};
|
|
const computeTopAndLeft = (track: Track | SpecialTag) => {
|
|
const computeTopAndLeft = (track: Track | SpecialTag) => {
|
|
- const topInsideSlice = track.offsetY;
|
|
|
|
- const leftInsideSlice = track.offsetX;
|
|
|
|
|
|
+ const topInsideSlice = track.offsetY - dy;
|
|
|
|
+ const leftInsideSlice = track.offsetX - dx;
|
|
return {
|
|
return {
|
|
- top: (topInsideSlice / originalImage.naturalHeight) * 100 + "%",
|
|
|
|
- left: (leftInsideSlice / originalImage.naturalWidth) * 100 + "%",
|
|
|
|
|
|
+ top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
|
|
|
|
+ left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
|
|
"font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
|
|
"font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
|
|
};
|
|
};
|
|
};
|
|
};
|