使用了vue3+ts进行开发
const lastCenter = ref<{
x: number
y: number
} | null>(null)
const lastDist = ref(0)
stage.value?.on('touchmove', (e) => {
e.evt.preventDefault();
const touch1 = e.evt.touches[0];
const touch2 = e.evt.touches[1];
if (touch1 && touch2) {
if (stage.value) {
stage.value.draggable(false)
if (stage.value.isDragging()) {
stage.value.stopDrag();
}
const p1 = {
x: touch1.clientX,
y: touch1.clientY,
};
const p2 = {
x: touch2.clientX,
y: touch2.clientY,
};
if (!lastCenter.value) {
lastCenter.value = getCenter(p1, p2);
return;
}
const newCenter = getCenter(p1, p2);
const dist = getDistance(p1, p2)
if (!lastDist.value) {
lastDist.value = dist;
}
const pointTo = {
x: (newCenter.x - stage.value.x()) / stage.value.scaleX(),
y: (newCenter.y - stage.value.y()) / stage.value.scaleX(),
};
const scale = stage.value.scaleX() * (dist / lastDist.value);
stage.value.scaleX(scale);
stage.value.scaleY(scale);
const dx = newCenter.x - lastCenter.value.x;
const dy = newCenter.y - lastCenter.value.y;
const newPos = {
x: newCenter.x - pointTo.x * scale + dx,
y: newCenter.y - pointTo.y * scale + dy,
};
stage.value.position(newPos);
lastDist.value = dist;
lastCenter.value = newCenter;
}
}
})
stage.value?.on('touchend', function () {
lastDist.value = 0;
lastCenter.value = null;
stage.value?.draggable(true)
});