提交 6f4d84a5 authored 作者: 搞事情's avatar 搞事情

1、增加单击拖放效果

上级 892f9f9d
......@@ -92,7 +92,7 @@
// Maximum folding distance ratio for non-corner flipping (0.1 - 1.0)
maxFoldingDistance: 0.8,
maxFoldingDistance: 2,
// Minimum drag distance to trigger non-corner flip
......@@ -1293,11 +1293,11 @@
var currentView = turnData.view || [data.opts.page];
var isLeftPage = data.opts.page % 2 === 0;
// 改进的双页拖动检测:支持跨页拖动
var dragThreshold = width * 0.3; // 30%的区域作为拖动触发区
// 改进的双页拖动检测:支持跨页拖动,扩大拖动区域到50%
var dragThreshold = width * 0.5; // 50%的区域作为拖动触发区
if (isLeftPage) {
// 左页:右侧30%区域可以向右翻页,左侧30%区域可以向左翻页
// 左页:右侧50%区域可以向右翻页,左侧50%区域可以向左翻页
if (point.x > width - dragThreshold) {
// 右侧拖动区域,向右翻页
virtualCorner = (point.y < height / 2) ? 'tr' : 'br';
......@@ -1306,7 +1306,7 @@
virtualCorner = (point.y < height / 2) ? 'tl' : 'bl';
}
} else {
// 右页:左侧30%区域可以向左翻页,右侧30%区域可以向右翻页
// 右页:左侧50%区域可以向左翻页,右侧50%区域可以向右翻页
if (point.x < dragThreshold) {
// 左侧拖动区域,向左翻页
virtualCorner = (point.y < height / 2) ? 'tl' : 'bl';
......@@ -1316,7 +1316,7 @@
}
}
} else {
// 单页模式:保持原有逻辑
// 单页模式:整个页面都可以拖动,根据点击位置智能选择方向
var centerX = width / 2;
var centerY = height / 2;
......@@ -1694,28 +1694,36 @@
switch (point.corner) {
case 'tl':
point.x = Math.max(point.x, 1);
// 放宽边界限制,允许向左上方超出
point.x = Math.max(point.x, -width * 0.2);
point.y = Math.max(point.y, -height * 0.2);
compute();
transform(tr, [1, 0, 0, 1], [100, 0], a);
data.fpage.transform(translate(-height, -width, ac) + rotate(90 - a * 2), '100% 100%');
folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
break;
case 'tr':
point.x = Math.min(point.x, width - 1);
// 放宽边界限制,允许向右上方超出
point.x = Math.min(point.x, width + width * 0.2);
point.y = Math.max(point.y, -height * 0.2);
compute();
transform(point2D(-tr.x, tr.y), [0, 0, 0, 1], [0, 0], -a);
data.fpage.transform(translate(0, -width, ac) + rotate(-90 + a * 2), '0% 100%');
folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
break;
case 'bl':
point.x = Math.max(point.x, 1);
// 放宽边界限制,允许向左下方超出
point.x = Math.max(point.x, -width * 0.2);
point.y = Math.min(point.y, height + height * 0.2);
compute();
transform(point2D(tr.x, -tr.y), [1, 1, 0, 0], [100, 100], -a);
data.fpage.transform(translate(-height, 0, ac) + rotate(-90 + a * 2), '100% 0%');
folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
break;
case 'br':
point.x = Math.min(point.x, width - 1);
// 放宽边界限制,允许向右下方超出
point.x = Math.min(point.x, width + width * 0.2);
point.y = Math.min(point.y, height + height * 0.2);
compute();
transform(point2D(-tr.x, -tr.y), [0, 1, 1, 0], [0, 100], a);
data.fpage.transform(rotate(90 - a * 2), '0% 0%');
......@@ -2058,30 +2066,31 @@
foldY = referenceCorner.y + (symmetricY - referenceCorner.y) * foldIntensity;
}
// 根据corner类型应用边界限制(这很重要,确保_fold函数能正常工作)
// 放宽边界限制,允许超出边界以获得更自然的翻页效果
// 根据corner类型应用宽松的边界限制
switch (corner) {
case 'tl':
foldX = Math.max(foldX, 1);
foldY = Math.max(foldY, 1);
// 允许向左上方超出边界
foldX = Math.max(foldX, -width * 0.3);
foldY = Math.max(foldY, -height * 0.3);
break;
case 'tr':
foldX = Math.min(foldX, width - 1);
foldY = Math.max(foldY, 1);
// 允许向右上方超出边界
foldX = Math.min(foldX, width * 1.3);
foldY = Math.max(foldY, -height * 0.3);
break;
case 'bl':
foldX = Math.max(foldX, 1);
foldY = Math.min(foldY, height - 1);
// 允许向左下方超出边界
foldX = Math.max(foldX, -width * 0.3);
foldY = Math.min(foldY, height * 1.3);
break;
case 'br':
foldX = Math.min(foldX, width - 1);
foldY = Math.min(foldY, height - 1);
// 允许向右下方超出边界
foldX = Math.min(foldX, width * 1.3);
foldY = Math.min(foldY, height * 1.3);
break;
}
// 最终边界检查
foldX = Math.max(0, Math.min(width, foldX));
foldY = Math.max(0, Math.min(height, foldY));
return {
x: foldX,
y: foldY
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论