更新图片组件
This commit is contained in:
zyronon
parent
a5286fbcd6
commit
f9c2323584
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<!-- <TestSlide></TestSlide>-->
|
||||
<!-- <SlideUser></SlideUser>-->
|
||||
<SlideImgs></SlideImgs>
|
||||
<!-- <SlideImgs></SlideImgs>-->
|
||||
<TestImg/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -9,13 +10,15 @@
|
||||
import TestSlide from "./TestSlide";
|
||||
import SlideUser from "../../components/slide/SlideUser";
|
||||
import SlideImgs from "../../components/slide/SlideImgs";
|
||||
import TestImg from "./TestImg";
|
||||
|
||||
export default {
|
||||
name: "Test",
|
||||
components: {
|
||||
TestSlide,
|
||||
SlideUser,
|
||||
SlideImgs
|
||||
SlideImgs,
|
||||
TestImg
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
151
src/pages/test/TestImg.vue
Normal file
151
src/pages/test/TestImg.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div id="TestImg">
|
||||
<img ref="img" src="../../assets/img/poster/0.jpg" alt=""
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import globalMethods from "../../utils/global-methods";
|
||||
|
||||
export default {
|
||||
name: "TestImg",
|
||||
data() {
|
||||
return {
|
||||
result: {
|
||||
width: 393,
|
||||
height: 699
|
||||
},
|
||||
x: 0,
|
||||
y: 0,
|
||||
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},
|
||||
touches: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
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);
|
||||
},
|
||||
handlePointers(e, type) {
|
||||
for (let i = 0; i < this.touches.length; i++) {
|
||||
if (this.touches[i].pointerId === e.pointerId) {
|
||||
if (type === 'update') {
|
||||
this.touches[i] = e;
|
||||
} else if (type === 'delete') {
|
||||
this.touches.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
start(e) {
|
||||
// console.log('start')
|
||||
if (e.touches && e.touches.length === 1) {
|
||||
} else {
|
||||
this.isTwo = true
|
||||
this.$refs.img.style['transition-duration'] = '0ms';
|
||||
|
||||
let events = e.touches[0];
|
||||
let events2 = e.touches[1];
|
||||
|
||||
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)
|
||||
// console.log('lastPoint1', this.lastPoint1)
|
||||
|
||||
}
|
||||
},
|
||||
move(e) {
|
||||
if (e.touches && e.touches.length === 1) {
|
||||
} else {
|
||||
this.isTwo = true
|
||||
|
||||
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.lastPoint1, this.lastPoint2);
|
||||
|
||||
|
||||
this.scale = this.scale * ratio
|
||||
// 计算当前双指中心点坐标
|
||||
// let center = this.getCenter(current1, current2)
|
||||
// console.log('center', center)
|
||||
|
||||
// 计算图片中心偏移量，默认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);
|
||||
|
||||
// console.log('this.x', this.x)
|
||||
// console.log('this.y', this.y)
|
||||
|
||||
// 图像应用缩放效果
|
||||
this.$refs.img.style.transform =
|
||||
// `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`;
|
||||
`scale(${this.scale})`;
|
||||
|
||||
// this.lastCenter = {x: center.x, y: center.y};
|
||||
this.lastPoint1 = {x: current1.x, y: current1.y};
|
||||
this.lastPoint2 = {x: current2.x, y: current2.y};
|
||||
}
|
||||
},
|
||||
end(e) {
|
||||
// console.log('end', e)
|
||||
// 图像应用缩放效果
|
||||
this.scale = 1
|
||||
this.x = this.y = 0
|
||||
this.$refs.img.style.transform =
|
||||
`translate3d(0px,0px,0) scale(1)`;
|
||||
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
#TestImg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,241 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>pinch</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.log {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 5px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<img id="image" alt="">
|
||||
</div>
|
||||
<div class="log"></div>
|
||||
|
||||
<script>
|
||||
// 获取dom
|
||||
const image = document.getElementById('image');
|
||||
const log = document.querySelector('.log');
|
||||
// 全局变量
|
||||
let result,
|
||||
x,
|
||||
y,
|
||||
scale = 1,
|
||||
maxScale,
|
||||
minScale = 0.5;
|
||||
// 图片加载完成后再操作，否则naturalWidth为0
|
||||
image.addEventListener('load', function () {
|
||||
result = getImgSize(image.naturalWidth, image.naturalHeight, window.innerWidth, window.innerHeight);
|
||||
image.style.width = result.width + 'px';
|
||||
image.style.height = result.height + 'px';
|
||||
x = (window.innerWidth - result.width) * 0.5;
|
||||
y = (window.innerHeight - result.height) * 0.5;
|
||||
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
|
||||
maxScale = Math.max(Math.round(image.naturalWidth / result.width), 3);
|
||||
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
|
||||
});
|
||||
image.src = 'http://jsdemo.codeman.top/images/liya.jpg';
|
||||
/**
|
||||
* 获取图片缩放尺寸
|
||||
* @param {number} naturalWidth
|
||||
* @param {number} naturalHeight
|
||||
* @param {number} maxWidth
|
||||
* @param {number} maxHeight
|
||||
* @returns
|
||||
*/
|
||||
function getImgSize(naturalWidth, naturalHeight, maxWidth, maxHeight) {
|
||||
const imgRatio = naturalWidth / naturalHeight;
|
||||
const maxRatio = maxWidth / maxHeight;
|
||||
let width, height;
|
||||
// 如果图片实际宽高比例 >= 显示宽高比例
|
||||
if (imgRatio >= maxRatio) {
|
||||
if (naturalWidth > maxWidth) {
|
||||
width = maxWidth;
|
||||
height = maxWidth / naturalWidth * naturalHeight;
|
||||
} else {
|
||||
width = naturalWidth;
|
||||
height = naturalHeight;
|
||||
}
|
||||
} else {
|
||||
if (naturalHeight > maxHeight) {
|
||||
width = maxHeight / naturalHeight * naturalWidth;
|
||||
height = maxHeight;
|
||||
} else {
|
||||
width = naturalWidth;
|
||||
height = naturalHeight;
|
||||
}
|
||||
}
|
||||
return { width: width, height: height }
|
||||
}
|
||||
|
||||
// 全局变量
|
||||
let isPointerdown = false, // 按下标识
|
||||
pointers = [], // 触摸点数组
|
||||
point1 = { x: 0, y: 0 }, // 第一个点坐标
|
||||
point2 = { x: 0, y: 0 }, // 第二个点坐标
|
||||
diff = { x: 0, y: 0 }, // 相对于上一次pointermove移动差值
|
||||
lastPointermove = { x: 0, y: 0 }, // 用于计算diff
|
||||
lastPoint1 = { x: 0, y: 0 }, // 上一次第一个触摸点坐标
|
||||
lastPoint2 = { x: 0, y: 0 }, // 上一次第二个触摸点坐标
|
||||
lastCenter; // 上一次中心点坐标
|
||||
// 绑定 pointerdown
|
||||
image.addEventListener('pointerdown', function (e) {
|
||||
pointers.push(e);
|
||||
point1 = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
if (pointers.length === 1) {
|
||||
isPointerdown = true;
|
||||
image.setPointerCapture(e.pointerId);
|
||||
lastPointermove = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
} else if (pointers.length === 2) {
|
||||
point2 = { x: pointers[1].clientX, y: pointers[1].clientY };
|
||||
lastPoint2 = { x: pointers[1].clientX, y: pointers[1].clientY };
|
||||
lastCenter = getCenter(point1, point2);
|
||||
}
|
||||
lastPoint1 = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
});
|
||||
// 绑定 pointermove
|
||||
image.addEventListener('pointermove', function (e) {
|
||||
if (isPointerdown) {
|
||||
handlePointers(e, 'update');
|
||||
const current1 = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
if (pointers.length === 1) {
|
||||
diff.x = current1.x - lastPointermove.x;
|
||||
diff.y = current1.y - lastPointermove.y;
|
||||
lastPointermove = { x: current1.x, y: current1.y };
|
||||
x += diff.x;
|
||||
y += diff.y;
|
||||
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
|
||||
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
|
||||
} else if (pointers.length === 2) {
|
||||
const current2 = { x: pointers[1].clientX, y: pointers[1].clientY };
|
||||
// 计算相对于上一次移动距离比例 ratio > 1放大，ratio < 1缩小
|
||||
let ratio = getDistance(current1, current2) / getDistance(lastPoint1, lastPoint2);
|
||||
// 缩放比例
|
||||
const _scale = scale * ratio;
|
||||
if (_scale > maxScale) {
|
||||
scale = maxScale;
|
||||
ratio = maxScale / scale;
|
||||
} else if (_scale < minScale) {
|
||||
scale = minScale;
|
||||
ratio = minScale / scale;
|
||||
} else {
|
||||
scale = _scale;
|
||||
}
|
||||
// 计算当前双指中心点坐标
|
||||
const center = getCenter(current1, current2);
|
||||
// 计算图片中心偏移量，默认transform-origin: 50% 50%
|
||||
// 如果transform-origin: 0% 0%，那origin.x = (ratio - 1) * result.width * 0
|
||||
// origin.y = (ratio - 1) * result.height * 0
|
||||
// 如果transform-origin: 30% 40%，那origin.x = (ratio - 1) * result.width * 0.3
|
||||
// origin.y = (ratio - 1) * result.height * 0.4
|
||||
const origin = { x: (ratio - 1) * result.width * 0.5, y: (ratio - 1) * result.height * 0.5 };
|
||||
// 计算偏移量
|
||||
x -= (ratio - 1) * (center.x - x) - origin.x - (center.x - lastCenter.x);
|
||||
y -= (ratio - 1) * (center.y - y) - origin.y - (center.y - lastCenter.y);
|
||||
image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
|
||||
lastCenter = { x: center.x, y: center.y };
|
||||
lastPoint1 = { x: current1.x, y: current1.y };
|
||||
lastPoint2 = { x: current2.x, y: current2.y };
|
||||
log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>
|
||||
scale = ${scale.toFixed(5)}<br>
|
||||
centerX = ${center.x.toFixed(0)}<br>centerY = ${center.y.toFixed(0)}<br>`;
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
// 绑定 pointerup
|
||||
image.addEventListener('pointerup', function (e) {
|
||||
if (isPointerdown) {
|
||||
handlePointers(e, 'delete');
|
||||
if (pointers.length === 0) {
|
||||
isPointerdown = false;
|
||||
} else if (pointers.length === 1) {
|
||||
point1 = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
lastPointermove = { x: pointers[0].clientX, y: pointers[0].clientY };
|
||||
}
|
||||
}
|
||||
});
|
||||
// 绑定 pointercancel
|
||||
image.addEventListener('pointercancel', function (e) {
|
||||
if (isPointerdown) {
|
||||
isPointerdown = false;
|
||||
pointers.length = 0;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 更新或删除指针
|
||||
* @param {PointerEvent} e
|
||||
* @param {string} type
|
||||
*/
|
||||
function handlePointers(e, type) {
|
||||
for (let i = 0; i < pointers.length; i++) {
|
||||
if (pointers[i].pointerId === e.pointerId) {
|
||||
if (type === 'update') {
|
||||
pointers[i] = e;
|
||||
} else if (type === 'delete') {
|
||||
pointers.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取两点间距离
|
||||
* @param {object} a 第一个点坐标
|
||||
* @param {object} b 第二个点坐标
|
||||
* @returns
|
||||
*/
|
||||
function getDistance(a, b) {
|
||||
const x = a.x - b.x;
|
||||
const y = a.y - b.y;
|
||||
return Math.hypot(x, y); // Math.sqrt(x * x + y * y);
|
||||
}
|
||||
/**
|
||||
* 获取中点坐标
|
||||
* @param {object} a 第一个点坐标
|
||||
* @param {object} b 第二个点坐标
|
||||
* @returns
|
||||
*/
|
||||
function getCenter(a, b) {
|
||||
const x = (a.x + b.x) / 2;
|
||||
const y = (a.y + b.y) / 2;
|
||||
return { x: x, y: y };
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user