pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

save

pull/29/head
hhh 3 years ago
parent
09273e9a53
commit
3cc830560d
10 changed files with 509 additions and 635 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 695
      src/components/slide/SlideImgs.vue
  2. 368
      src/components/slide/SlideImgs2.vue
  3. 2
      src/pages/slideHooks/H.vue
  4. 4
      src/pages/slideHooks/SlideItem.vue
  5. 8
      src/pages/slideHooks/V.vue
  6. 4
      src/pages/slideHooks/VInfinite.vue
  7. 12
      src/pages/slideHooks/common.js
  8. 26
      src/pages/slideHooks/index.vue
  9. 14
      src/pages/test/Test.vue
  10. 11
      src/utils/index.jsx

695
src/components/slide/SlideImgs.vue
Unescape View File

@ -1,12 +1,12 @@ @@ -1,12 +1,12 @@
<template>
<div id="SlideImgs">
<div class="img-slide-wrapper" ref="wap">
<div class="img-slide-wrapper">
<div class="img-slide-list"
ref="list"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend">
<div class="img-slide-item" v-for="img in modelValue.imgs">
ref="wrapperEl"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd">
<div class="img-slide-item" v-for="img in props.modelValue.imgs">
<img :ref="setItemRef" :src="img">
</div>
</div>
@ -20,11 +20,20 @@ @@ -20,11 +20,20 @@
</div>
</template>
<script>
<script setup lang="jsx">
import enums from "../../utils/enums";
import globalMethods from '../../utils'
import Utils from '../../utils'
import {mat4} from 'gl-matrix'
import {cloneDeep} from "lodash";
import {onMounted, reactive, ref} from "vue";
import {
getSlideDistance,
slideInit,
slideReset,
slideTouchEnd,
slideTouchMove,
slideTouchStart
} from "../../pages/slideHooks/common";
import {SlideType} from "../../utils/const_var";
let out = new Float32Array([
0, 0, 0, 0,
@ -38,426 +47,291 @@ let ov = new Float32Array([ @@ -38,426 +47,291 @@ let ov = new Float32Array([
0, 0, 1, 0,
0, 0, 0, 1,
]);
let original = cloneDeep(ov)
const rectMap = new Map()
export default {
name: "SlideImgs",
components: {},
props: {
modelValue: {
type: Object,
default() {
return {
type: 'imgs',
imgs: [
new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
],
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
const props = defineProps({
modelValue: {
type: Object,
default() {
return {
type: 'imgs',
imgs: [
new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
],
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
}
}
}
})
const judgeValue = 20
const wrapperEl = ref(null)
const state = reactive({
name: 'SlideHorizontal',
localIndex: 0,
needCheck: true,
isTwo: true,
next: false,
wrapper: {width: 0, height: 0, childrenLength: 0},
last: {
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
},
data() {
return {
itemRefs: [],
baseActiveIndex: 0,
progress: 0,
cycleFn: null,
state: 'play',//stop,custom
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
width: document.body.clientWidth,
startTime: 0,
index: 0,
isDrawRight: false,
isDrawDown: false,
isTwo: false,
store: {
scale: 1
},
result: {
width: 414,
height: 737
},
x: 0,
y: 79,
scale: 1,
maxScale: 3,
minScale: 0.5,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
diff: {x: 0, y: 0},
lastPointermove: {x: 0, y: 0},
lastPoint1: {x: 0, y: 0},
lastPoint2: {x: 0, y: 0},
lastCenter: {x: 0, y: 0},
startCenter: {x: 0, y: 0},
a: {},
b: {},
last: {
ratio: 1,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
},
start: {
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
}
}
},
created() {
this.width = document.body.clientWidth
},
watch: {
state(newVal, oldVal) {
return
console.log('newVal', newVal)
if (newVal === 'play') requestAnimationFrame(this.cycleFn)
if (newVal === 'stop') cancelAnimationFrame(this.cycleFn)
if (newVal === 'custom') cancelAnimationFrame(this.cycleFn)
}
start: {
x: 0, y: 0,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
center: {x: 0, y: 0},
time: 0
},
mounted() {
this.cycleFn = () => {
if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
if (this.progress < this.modelValue.imgs.length * 100) {
this.progress += .4
this.index = parseInt(this.progress / 100)
if (this.$refs.list) {
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
}
} else {
this.progress = 0
// cancelAnimationFrame(this.cycleFn)
move: {x: 0, y: 0},
itemRefs: [],
status: 'play',//stop,custom
progress: 0,
cycleFn: null,
})
onMounted(() => {
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
state.cycleFn = () => {
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
if (state.progress < props.modelValue.imgs.length * 100) {
state.progress += .4
state.localIndex = parseInt(state.progress / 100)
if (wrapperEl.value) {
Utils.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
Utils.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state)}px, 0px, 0px)`)
}
requestAnimationFrame(this.cycleFn)
} else {
state.progress = 0
// cancelAnimationFrame(this.cycleFn)
}
return
// requestAnimationFrame(this.cycleFn)
let x = 0
let y = 0
let scale = 1
requestAnimationFrame(state.cycleFn)
}
requestAnimationFrame(state.cycleFn)
})
function touchStart(e) {
console.log('start', e.touches.length)
// if (s.state !== 'custom') {
// this.state = 'stop'
// }
if (e.touches.length === 1) {
state.isTwo = false
slideTouchStart(e, wrapperEl.value, state)
} else {
if (state.isTwo) return
state.isTwo = true
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms';
state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
}
}
let isDrag = false // 按下标识
const image = document.querySelector(`.img-slide-list`);
let tt = new Map()
image.addEventListener('wheel', e => {
this.itemRefs[this.index].style['transition-duration'] = '0ms';
function touchMove(e) {
// console.log('move', e.touches.length)
if (state.isTwo && e.touches.length === 1) {
state.status = 'pause'
Utils.$stopPropagation(e)
// console.log('单手移动',)
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let movementX = current.x - state.last.point1.x
let movementY = current.y - state.last.point1.y
// console.log(movementX, movementY)
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
ov = mat4.multiply(out, t, ov);
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
state.last.point1 = current
} else {
if (e.touches.length === 1) {
state.isTwo = false
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
state.status = 'pause'
}, SlideType.HORIZONTAL)
} else {
state.isTwo = true
Utils.$stopPropagation(e)
state.status = 'pause'
let {clientX, clientY, deltaY} = e;
let rect = {x: 0, y: 0}
if (tt.has(this.index)) {
rect = tt.get(this.index)
if (rectMap.has(state.localIndex)) {
rect = rectMap.get(state.localIndex)
} else {
rect = this.itemRefs[this.index].getBoundingClientRect()
tt.set(this.index, rect)
}
clientX -= rect.x
clientY -= rect.y
const zoom = 1 + (deltaY < 0 ? 0.1 : -0.1);
const x = clientX * (1 - zoom);
const y = clientY * (1 - zoom);
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
ov = mat4.multiply(out, t, ov);
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
// image.setAttribute("style", `transform:matrix3d(${ov.toString()});`);
})
image.addEventListener('mousedown', () => {
this.itemRefs[this.index].style['transition-duration'] = '0ms';
isDrag = true
});
image.addEventListener('mousemove', (e) => {
e.preventDefault();
if (isDrag) {
const {movementX, movementY} = e;
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
ov = mat4.multiply(out, t, ov);
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
}
});
image.addEventListener('mouseup', () => {
this.itemRefs[this.index].style['transition-duration'] = '300ms';
this.itemRefs[this.index].style.transform = `matrix3d(${original.toString()})`;
ov = original
isDrag = false
});
},
methods: {
getCenter(a, b) {
const x = (a.x + b.x) / 2;
const y = (a.y + b.y) / 2;
return {x, y}
},
// 获取坐标之间的举例
getDistance(start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
},
touchstart(e) {
console.log('start', e.touches.length)
if (this.state !== 'custom') {
this.state = 'stop'
//getBoundingClientRect在手机上获取不到值
let offset = $(state.itemRefs[state.localIndex]).offset()
rect = {x: offset.left, y: offset.top}
rectMap.set(state.localIndex, rect)
}
if (e.touches.length === 1) {
this.isTwo = false
globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
this.startX = e.touches[0].pageX
this.startY = e.touches[0].pageY
this.startTime = Date.now()
} else {
if (this.isTwo) return
this.isTwo = true
this.itemRefs[this.index].style['transition-duration'] = '0ms';
if (e.cancelable) {
e.preventDefault();
}
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
this.last.point1 = this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
this.last.point2 = this.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
this.startCenter = this.getCenter(this.point1, this.point2)
}
},
touchmove(e) {
console.log('move', e.touches.length)
if (this.isTwo && e.touches.length === 1) {
// console.log('单手移动',)
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let movementX = current.x - this.last.point1.x
let movementY = current.y - this.last.point1.y
console.log(movementX, movementY)
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
let ov1 = mat4.multiply(out, t, ov);
this.itemRefs[this.index].style.transform = `matrix3d(${ov1.toString()})`;
// this.last.point1 = current
} else {
if (e.touches.length === 1) {
this.isTwo = false
// 双指缩放比例，就是对应的放大倍数
let currentRatio = Utils.getDistance(current1, current2) / Utils.getDistance(state.start.point1, state.start.point2);
this.moveX = e.touches[0].pageX - this.startX
this.moveY = e.touches[0].pageY - this.startY
let center = Utils.getCenter(current1, current2)
this.isDrawRight = this.moveX < 0
this.isDrawDown = this.moveY < 0
center.x -= rect.x
center.y -= rect.y
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
let zoom = currentRatio / ov[0]
const x = center.x * (1 - zoom);
const y = center.y * (1 - zoom);
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
ov = mat4.multiply(out, t, ov);
if (this.index === 0 && !this.isDrawRight) return
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
let movementRatio = currentRatio - ov[0]
//如果本次比例和上次的不超过0.02。那么判定为平移
if (Math.abs(movementRatio) <= 0.02) {
let movementX = current1.x - state.last.point1.x
let movementY = current1.y - state.last.point1.y
let movement2X = current2.x - state.last.point2.x
let movement2Y = current2.y - state.last.point2.y
let minX = Math.min(movementX, movement2X)
let minY = Math.min(movementY, movement2Y)
const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
ov = mat4.multiply(out, t1, ov);
}
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index) +
this.moveX}px, 0px, 0px)`)
} else {
this.isTwo = true
if (e.cancelable) {
e.preventDefault();
}
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
// 双指缩放比例，就是对应的放大倍数
let ratio = this.getDistance(current1, current2) / this.getDistance(this.point1, this.point2);
let rect = {x: 0, y: 0}
if (rectMap.has(this.index)) {
rect = rectMap.get(this.index)
} else {
//getBoundingClientRect在手机上获取不到值
let offset = $(this.itemRefs[this.index]).offset()
rect.x = offset.left
rect.y = offset.top
rectMap.set(this.index, rect)
}
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
state.last.point1 = current1
state.last.point2 = current2
}
}
}
let center = cloneDeep(this.startCenter)
center.x -= rect.x
center.y -= rect.y
let zoom = ratio
const x = center.x * (1 - zoom);
const y = center.y * (1 - zoom);
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov
//但这里zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
ov = mat4.multiply(out, t, original);
let movementX = current1.x - this.last.point1.x
let movementY = current1.y - this.last.point1.y
let movement2X = current2.x - this.last.point2.x
let movement2Y = current2.y - this.last.point2.y
let minX = Math.min(movementX, movement2X)
let minY = Math.min(movementY, movement2Y)
console.log('minX', minX, 'minY', minY)
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
this.last.point1 = current1
this.last.point2 = current2
}
}
},
touchend(e) {
console.log('end', e.touches.length, this.isTwo)
if (this.isTwo && e.touches.length === 1) {
//双指绽放，但只松开了一只手
this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
} else {
if (this.isTwo) {
ov = original
this.itemRefs[this.index].style['transition-duration'] = '300ms';
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
// if (this.state !== 'custom') {
// this.state = 'play'
// }
// if (e.touches.length) {
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
// }
} else {
if (this.index === 0 && !this.isDrawRight) return
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
let canSlide = this.width / 5 < Math.abs(this.moveX);
if (Date.now() - this.startTime < 40) canSlide = false
if (canSlide) {
if (this.isDrawRight) {
this.index += 1
} else {
this.index -= 1
}
this.state = 'custom'
this.progress = (this.index + 1) * 100
} else {
if (this.state !== 'custom') {
this.state = 'play'
function touchEnd(e) {
console.log('end', e.touches.length, state.isTwo)
//双指缩放，但只松开了一只手
if (state.isTwo && e.touches.length === 1) {
Utils.$stopPropagation(e)
state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
} else {
if (state.isTwo) {
Utils.$stopPropagation(e)
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
} else {
slideTouchEnd(e, state, canNext,
() => {
state.status = 'custom'
state.progress = (state.localIndex + 1) * 100
},
() => {
if (state.status !== 'custom') {
state.status = 'play'
requestAnimationFrame(state.cycleFn)
}
}
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
}
}
},
getWidth(index) {
return index * this.width
},
setItemRef(el) {
if (el) {
this.itemRefs.push(el)
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
},
toggle() {
return
if (this.state === 'stop') {
this.state = 'play'
requestAnimationFrame(this.cycleFn)
} else {
this.state = 'stop'
}
},
getProgressWidth(index) {
if (this.progress >= (index + 1) * 100) return {width: '100%'}
return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
)
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
}
}
}
function getProgressWidth(index) {
if (state.progress >= (index + 1) * 100) return {width: '100%'}
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
}
function setItemRef(el) {
el && state.itemRefs.push(el)
}
function canNext(isNext) {
return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext));
}
</script>
<style scoped lang="less">
@ -469,14 +343,10 @@ html { @@ -469,14 +343,10 @@ html {
position: relative;
background: black;
width: 100%;
//height: 100%;
height: calc(100vh - 50rem);
height: 100%;
overflow: hidden;
color: white;
font-size: 14rem;
display: flex;
align-items: center;
justify-content: center;
.img-slide-wrapper {
height: 100%;
@ -498,30 +368,15 @@ html { @@ -498,30 +368,15 @@ html {
img {
transform-origin: 0 0;
width: 100vw;
width: 100%;
}
}
}
}
.content {
width: 100vw;
.base-slide-item {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100vw;
}
}
.progress-bar {
position: absolute;
width: 100vw;
width: 100%;
bottom: 0;
display: flex;
box-sizing: border-box;

368
src/components/slide/SlideImgs2.vue
Unescape View File

@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
<div class="img-slide-wrapper">
<div class="img-slide-list"
ref="list"
@touchstart="start"
@touchmove="move"
@touchend="end">
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend">
<div class="img-slide-item" v-for="img in modelValue.imgs">
<img :ref="setItemRef" :src="img">
</div>
@ -22,8 +22,25 @@ @@ -22,8 +22,25 @@
<script>
import enums from "../../utils/enums";
import globalMethods from '../../utils'
//TODO 放大功能待完善
import Utils from '../../utils'
import GM from '../../utils'
import {mat4} from 'gl-matrix'
import {cloneDeep} from "lodash";
let out = new Float32Array([
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
])
let ov = new Float32Array([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
]);
let original = cloneDeep(ov)
const rectMap = new Map()
export default {
name: "SlideImgs",
components: {},
@ -134,42 +151,27 @@ export default { @@ -134,42 +151,27 @@ export default {
cycleFn: null,
state: 'play',//stop,custom
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
width: document.body.clientWidth,
startTime: 0,
index: 0,
isDrawRight: false,
isDrawDown: false,
isNext: false,
isTwo: false,
store: {
scale: 1
last: {
ratio: 1,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
},
result: {
width: 414,
height: 737
start: {
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
center: {x: 0, y: 0},
time: 0
},
x: 0,
y: 79,
scale: 1,
maxScale: 3,
minScale: 0.5,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
diff: {x: 0, y: 0},
lastPointermove: {x: 0, y: 0},
lastPoint1: {x: 0, y: 0},
lastPoint2: {x: 0, y: 0},
lastCenter: {x: 0, y: 0},
a: {},
b: {},
move: {x: 0, y: 0},
wrapper: {
width: 0
}
}
},
created() {
this.width = document.body.clientWidth
},
watch: {
state(newVal, oldVal) {
@ -187,9 +189,8 @@ export default { @@ -187,9 +189,8 @@ export default {
this.progress += .4
this.index = parseInt(this.progress / 100)
if (this.$refs.list) {
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
}
} else {
this.progress = 0
@ -197,6 +198,8 @@ export default { @@ -197,6 +198,8 @@ export default {
}
requestAnimationFrame(this.cycleFn)
}
this.wrapper.width = GM.$getCss(this.$refs.list, 'width')
return
// requestAnimationFrame(this.cycleFn)
},
methods: {
@ -205,137 +208,164 @@ export default { @@ -205,137 +208,164 @@ export default {
const y = (a.y + b.y) / 2;
return {x, y}
},
start(e) {
console.log('start')
// 获取坐标之间的举例
getDistance(start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
},
touchstart(e) {
console.log('start', e.touches.length)
if (this.state !== 'custom') {
this.state = 'stop'
}
if (e.touches && e.touches.length === 1) {
if (e.touches.length === 1) {
this.isTwo = false
globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
this.startX = e.touches[0].pageX
this.startY = e.touches[0].pageY
this.startTime = Date.now()
Utils.$setCss(this.$refs.list, 'transition-duration', `0ms`)
this.start = {
point1: {
x: e.touches[0].pageX,
y: e.touches[0].pageY,
},
time: Date.now()
}
} else {
if (this.isTwo) return
this.isTwo = true
this.itemRefs[this.index].style['transition-duration'] = '0ms';
let events = e.touches[0];
let events2 = e.touches[1];
if (e.cancelable) {
e.preventDefault();
}
this.lastPoint1 = this.point1 = {x: events.pageX, y: events.pageY};
this.lastPoint2 = this.point2 = {x: events2.pageX, y: events2.pageY};
this.lastCenter = this.getCenter(this.lastPoint1, this.lastPoint2)
this.last.point1 = this.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
this.last.point2 = this.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
this.start.center = this.getCenter(this.start.point1, this.start.point2)
}
},
move(e) {
if (e.touches && e.touches.length === 1) {
this.isTwo = false
this.moveX = e.touches[0].pageX - this.startX
this.moveY = e.touches[0].pageY - this.startY
this.isDrawRight = this.moveX < 0
this.isDrawDown = this.moveY < 0
if (this.index === 0 && !this.isDrawRight) return
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index) +
this.moveX}px, 0px, 0px)`)
touchmove(e) {
console.log('move', e.touches.length)
if (this.isTwo && e.touches.length === 1) {
Utils.$stopPropagation(e)
// console.log('单手移动',)
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let movementX = current.x - this.last.point1.x
let movementY = current.y - this.last.point1.y
console.log(movementX, movementY)
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
ov = mat4.multiply(out, t, ov);
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
this.last.point1 = current
} else {
this.isTwo = true
if (e.cancelable) {
e.preventDefault();
}
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
// 获取坐标之间的举例
let getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
// 双指缩放比例计算
let ratio = getDistance(current1, current2) / getDistance(this.lastPoint1, this.lastPoint2);
if (e.touches.length === 1) {
this.isTwo = false
this.move.x = e.touches[0].pageX - this.start.point1.x
this.move.y = e.touches[0].pageY - this.start.point1.y
this.isNext = this.move.x < 0
if (!this.canNext(this.isNext)) return
Utils.$stopPropagation(e)
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance() + this.move.x}px, 0px, 0px)`)
} else {
Utils.$stopPropagation(e)
this.isTwo = true
// 计算当前双指中心点坐标
let center = this.getCenter(current1, current2)
console.log('center', center)
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
// 计算图片中心偏移量，默认transform-origin: 50% 50%
// 如果transform-origin: 30% 40%，那origin.x = (ratio - 1) * result.width * 0.3
// origin.y = (ratio - 1) * result.height * 0.4
// 如果通过修改宽高或使用transform缩放，但将transform-origin设置为左上角时。
// 可以不用计算origin，因为(ratio - 1) * result.width * 0 = 0
const origin = {
x: (ratio - 1) * this.result.width * 0.5,
y: (ratio - 1) * this.result.height * 0.5
};
// 计算偏移量，认真思考一下为什么要这样计算(带入特定的值计算一下)
this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
// 双指缩放比例，就是对应的放大倍数
let ratio = this.getDistance(current1, current2) / this.getDistance(this.start.point1, this.start.point2);
// console.log('this.x', this.x)
// console.log('this.y', this.y)
let rect = {x: 0, y: 0}
if (rectMap.has(this.index)) {
rect = rectMap.get(this.index)
} else {
//getBoundingClientRect在手机上获取不到值
let offset = $(this.itemRefs[this.index]).offset()
rect.x = offset.left
rect.y = offset.top
rectMap.set(this.index, rect)
}
// 图像应用缩放效果
this.itemRefs[this.index].style.transform =
`translate3d(${this.x}px,${this.y}px,0) scale(${this.store.scale * ratio})`;
let center = this.getCenter(current1, current2)
center.x -= rect.x
center.y -= rect.y
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
let zoom = ratio / ov[0]
const x = center.x * (1 - zoom);
const y = center.y * (1 - zoom);
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]);
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
ov = mat4.multiply(out, t, ov);
let dRatio = this.last.ratio - ratio
//如果本次比例和上次的不超过0.02。那么判定为平移
if (Math.abs(dRatio) <= 0.02) {
let movementX = current1.x - this.last.point1.x
let movementY = current1.y - this.last.point1.y
let movement2X = current2.x - this.last.point2.x
let movement2Y = current2.y - this.last.point2.y
let minX = Math.min(movementX, movement2X)
let minY = Math.min(movementY, movement2Y)
const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]);
ov = mat4.multiply(out, t1, ov);
}
this.lastCenter = {x: center.x, y: center.y};
this.lastPoint1 = {x: current1.x, y: current1.y};
this.lastPoint2 = {x: current2.x, y: current2.y};
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
this.last.point1 = current1
this.last.point2 = current2
this.last.ratio = ratio
}
}
},
end(e) {
console.log('end',e.touches)
if (this.isTwo) {
this.store.scale = 1
this.itemRefs[this.index].style['transition-duration'] = '300ms';
this.itemRefs[this.index].style.transform = `translate3d(0,0,0) scale(1)`;
if (this.state !== 'custom') {
this.state = 'play'
}
if (e.touches.length){
this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
}
touchend(e) {
console.log('end', e.touches.length, this.isTwo)
if (this.isTwo && e.touches.length === 1) {
Utils.$stopPropagation(e)
//双指缩放，但只松开了一只手
this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
} else {
if (this.index === 0 && !this.isDrawRight) return
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
if (this.isTwo) {
Utils.$stopPropagation(e)
ov = original
this.itemRefs[this.index].style['transition-duration'] = '300ms';
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
// if (this.state !== 'custom') {
// this.state = 'play'
// }
// if (e.touches.length) {
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
// }
let canSlide = this.width / 5 < Math.abs(this.moveX);
if (Date.now() - this.startTime < 40) canSlide = false
} else {
if (!this.canNext(this.isNext)) return
Utils.$stopPropagation(e)
let canSlide = this.wrapper.width / 5 < Math.abs(this.move.x);
if (Date.now() - this.start.time < 40) canSlide = false
if (canSlide) {
if (this.isDrawRight) {
this.index += 1
if (canSlide) {
if (this.isNext) {
this.index += 1
} else {
this.index -= 1
}
this.state = 'custom'
this.progress = (this.index + 1) * 100
} else {
this.index -= 1
}
this.state = 'custom'
this.progress = (this.index + 1) * 100
} else {
if (this.state !== 'custom') {
this.state = 'play'
if (this.state !== 'custom') {
this.state = 'play'
}
}
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
}
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
globalMethods.$setCss(this.$refs.list, 'transform',
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
}
},
getWidth(index) {
return index * this.width
canNext(isNext) {
return !((this.index === 0 && !isNext) || (this.index === this.modelValue.imgs.length - 1 && isNext));
},
getSlideDistance() {
return -this.index * this.wrapper.width
},
setItemRef(el) {
if (el) {
@ -374,76 +404,60 @@ html { @@ -374,76 +404,60 @@ html {
position: relative;
background: black;
width: 100%;
//height: 100%;
height: calc(100vh - 5rem);
overflow: auto;
height: 100%;
overflow: hidden;
color: white;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 14rem;
.img-slide-wrapper {
width: 100vw;
overflow: hidden;
height: 100%;
width: 100%;
.img-slide-list {
width: 100vw;
height: 100%;
width: 100%;
display: flex;
position: relative;
.img-slide-item {
min-width: 100vw;
height: 100%;
width: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
img {
//transform-origin: left top;
width: 100vw;
//position: absolute;
//height: 100%;
transform-origin: 0 0;
width: 100%;
}
}
}
}
.content {
width: 100vw;
.base-slide-item {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100vw;
}
}
.progress-bar {
position: absolute;
width: 100vw;
width: 100%;
bottom: 0;
display: flex;
box-sizing: border-box;
padding: 0 .5rem;
padding: 0 5rem;
justify-content: space-between;
.bar {
border-radius: 1rem;
border-radius: 10rem;
flex: 1;
margin: 0 .2rem;
height: .2rem;
margin: 0 2rem;
height: 2rem;
background: gray;
position: relative;
.progress {
border-radius: 1rem;
border-radius: 10rem;
position: absolute;
left: 0;
height: .2rem;
height: 2rem;
background: white;
//width: 100%;
//animation: start 3s linear;

2
src/pages/slideHooks/H.vue
Unescape View File

@ -47,7 +47,7 @@ function touchStart(e) { @@ -47,7 +47,7 @@ function touchStart(e) {
}
function touchMove(e) {
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.HORIZONTAL)
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.HORIZONTAL)
}
function touchEnd(e) {

4
src/pages/slideHooks/SlideItem.vue
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<template>
<div class="slide-item">
<div class="slide-item2">
<slot></slot>
</div>
</template>
@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
</script>
<style scoped lang="less">
.slide-item {
.slide-item2 {
height: 100%;
width: 100%;
flex-shrink: 0;

8
src/pages/slideHooks/V.vue
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<script setup>
import {onMounted, reactive, ref,watch} from "vue";
import {onMounted, reactive, ref, watch} from "vue";
import GM from '../../utils'
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
import {SlideType} from "../../utils/const_var";
@ -46,13 +46,11 @@ function touchStart(e) { @@ -46,13 +46,11 @@ function touchStart(e) {
}
function touchMove(e) {
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
}
function touchEnd(e) {
slideTouchEnd(e, state, canNext, () => {
}, SlideType.VERTICAL)
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
}

4
src/pages/slideHooks/VInfinite.vue
Unescape View File

@ -124,13 +124,13 @@ function touchStart(e) { @@ -124,13 +124,13 @@ function touchStart(e) {
}
function touchMove(e) {
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
}
function touchEnd(e) {
slideTouchEnd(e, state, canNext, () => {
}, SlideType.VERTICAL)
},null, SlideType.VERTICAL)
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
}

12
src/pages/slideHooks/common.js
Unescape View File

@ -36,15 +36,16 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) { @@ -36,15 +36,16 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
return state.next
}
export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HORIZONTAL) {
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
state.move.x = e.touches[0].pageX - state.start.x
state.move.y = e.touches[0].pageY - state.start.y
let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
if (!cb?.(isNext)) return
if (!canNextCb?.(isNext)) return
if (canSlide(state, judgeValue, type)) {
nextCb?.()
bus.emit(state.name + '-moveX', state.move.x)
Utils.$stopPropagation(e)
let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
@ -55,11 +56,12 @@ export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HO @@ -55,11 +56,12 @@ export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HO
} else {
dx2 = t + state.move.y
}
Utils.$setCss(el, 'transition-duration', `0ms`)
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
}
}
export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = SlideType.HORIZONTAL) {
let isHorizontal = type === SlideType.HORIZONTAL;
let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
@ -79,6 +81,8 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORI @@ -79,6 +81,8 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORI
state.localIndex--
}
nextCb?.()
} else {
notNextCb?.()
}
}
}
@ -97,7 +101,7 @@ export function slideReset(el, state, type, emit) { @@ -97,7 +101,7 @@ export function slideReset(el, state, type, emit) {
state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
state.next = false
state.needCheck = true
emit('update:index', state.localIndex)
emit?.('update:index', state.localIndex)
bus.emit(state.name + '-end', state.localIndex)
}

26
src/pages/slideHooks/index.vue
Unescape View File

@ -1,24 +1,24 @@ @@ -1,24 +1,24 @@
<template>
<div class="test-slide-wrapper">
<H v-model:index="state.baseIndex">
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<H class="h" v-model:index="state.navIndex">
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big">找红包</div>
</SlideItem>
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big">热点</div>
</SlideItem>
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big">社区</div>
</SlideItem>
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big">关注</div>
</SlideItem>
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big">商城</div>
</SlideItem>
<SlideItem class="slide-item">
<SlideItem class="">
<VInfinite
v-model:index="state.index"
:render="render"
@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
</div>
<Footer v-bind:init-tab="1"/>
</SlideItem>
<SlideItem class="slide-item gray">
<SlideItem class=" gray">
<div class="big" v-for="i in 100">主页</div>
</SlideItem>
</H>
@ -63,10 +63,10 @@ const state = reactive({ @@ -63,10 +63,10 @@ const state = reactive({
navIndex: 5,
index: 0,
recommendVideos: [
{
type: 'img',
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
},
// {
// type: 'img',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
{
type: 'imgs',
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
@ -85,7 +85,7 @@ function render(item, itemIndex, play) { @@ -85,7 +85,7 @@ function render(item, itemIndex, play) {
node = <SlideImgs/>
}
return node
// return <SlideItem class="slide-item gray">{node}</SlideItem>
// return <SlideItem class=" gray">{node}</SlideItem>
}
// function render1(item, itemIndex, play) {

14
src/pages/test/Test.vue
Unescape View File

@ -1,9 +1,9 @@ @@ -1,9 +1,9 @@
<template>
<!-- <TestSlide></TestSlide>-->
<!-- <SlideUser></SlideUser>-->
<SlideImgs></SlideImgs>
<!-- <TestImg/>-->
<!-- <slideHooks></slideHooks>-->
<!-- <SlideImgs></SlideImgs>-->
<!-- <TestImg/>-->
<slideHooks></slideHooks>
<!-- <div class="body">-->
<!-- <div class="wrapper">-->
@ -46,7 +46,7 @@ export default { @@ -46,7 +46,7 @@ export default {
}
}
</script>
<style lang="less">
<style scoped lang="less">
.body {
display: flex;
align-items: center;
@ -63,10 +63,4 @@ export default { @@ -63,10 +63,4 @@ export default {
background: black;
overflow: hidden;
}
img {
transform-origin: 0 0;
max-width: 1040px;
max-height: 600px;
}
</style>

11
src/utils/index.jsx
Unescape View File

@ -353,7 +353,7 @@ export default { @@ -353,7 +353,7 @@ export default {
}
return str
},
$randomNum(minNum, maxNum) {
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
@ -363,4 +363,13 @@ export default { @@ -363,4 +363,13 @@ export default {
return 0;
}
},
getCenter(a, b) {
const x = (a.x + b.x) / 2;
const y = (a.y + b.y) / 2;
return {x, y}
},
// 获取坐标之间的举例
getDistance(start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
},
}

Write Preview
Loading…
Cancel
Save