110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
Page({
|
|
data: {
|
|
squareX: 100,
|
|
squareY: 100,
|
|
squareWidth: 200,
|
|
squareHeight: 200,
|
|
isMoving: false,
|
|
isResizing: false,
|
|
resizeCorner: '',
|
|
startX: 0,
|
|
startY: 0,
|
|
startSquareX: 0,
|
|
startSquareY: 0,
|
|
startSquareWidth: 0,
|
|
startSquareHeight: 0
|
|
},
|
|
|
|
// 开始移动方块
|
|
onMoveStart(e) {
|
|
const { x, y } = e.touches[0];
|
|
this.setData({
|
|
isMoving: true,
|
|
startX: x,
|
|
startY: y,
|
|
startSquareX: this.data.squareX,
|
|
startSquareY: this.data.squareY
|
|
});
|
|
},
|
|
|
|
// 移动方块
|
|
onMoveMove(e) {
|
|
if (!this.data.isMoving) return;
|
|
const { x, y } = e.touches[0];
|
|
const deltaX = x - this.data.startX;
|
|
const deltaY = y - this.data.startY;
|
|
this.setData({
|
|
squareX: this.data.startSquareX + deltaX,
|
|
squareY: this.data.startSquareY + deltaY
|
|
});
|
|
},
|
|
|
|
// 结束移动方块
|
|
onMoveEnd() {
|
|
this.setData({ isMoving: false });
|
|
},
|
|
|
|
// 开始调整方块尺寸
|
|
onResizeStart(e) {
|
|
const { x, y } = e.touches[0];
|
|
const corner = e.currentTarget.dataset.corner;
|
|
this.setData({
|
|
isResizing: true,
|
|
resizeCorner: corner,
|
|
startX: x,
|
|
startY: y,
|
|
startSquareWidth: this.data.squareWidth,
|
|
startSquareHeight: this.data.squareHeight,
|
|
startSquareX: this.data.squareX,
|
|
startSquareY: this.data.squareY
|
|
});
|
|
},
|
|
|
|
// 调整方块尺寸
|
|
onResizeMove(e) {
|
|
if (!this.data.isResizing) return;
|
|
const { x, y } = e.touches[0];
|
|
const deltaX = x - this.data.startX;
|
|
const deltaY = y - this.data.startY;
|
|
let newSquareWidth = this.data.startSquareWidth;
|
|
let newSquareHeight = this.data.startSquareHeight;
|
|
let newSquareX = this.data.startSquareX;
|
|
let newSquareY = this.data.startSquareY;
|
|
|
|
switch (this.data.resizeCorner) {
|
|
case 'tl':
|
|
newSquareWidth = Math.max(50, this.data.startSquareWidth - deltaX);
|
|
newSquareHeight = Math.max(50, this.data.startSquareHeight - deltaY);
|
|
newSquareX = this.data.startSquareX + deltaX;
|
|
newSquareY = this.data.startSquareY + deltaY;
|
|
break;
|
|
case 'tr':
|
|
newSquareWidth = Math.max(50, this.data.startSquareWidth + deltaX);
|
|
newSquareHeight = Math.max(50, this.data.startSquareHeight - deltaY);
|
|
newSquareY = this.data.startSquareY + deltaY;
|
|
break;
|
|
case 'bl':
|
|
newSquareWidth = Math.max(50, this.data.startSquareWidth - deltaX);
|
|
newSquareHeight = Math.max(50, this.data.startSquareHeight + deltaY);
|
|
newSquareX = this.data.startSquareX + deltaX;
|
|
break;
|
|
case 'br':
|
|
newSquareWidth = Math.max(50, this.data.startSquareWidth + deltaX);
|
|
newSquareHeight = Math.max(50, this.data.startSquareHeight + deltaY);
|
|
break;
|
|
}
|
|
|
|
this.setData({
|
|
squareWidth: newSquareWidth,
|
|
squareHeight: newSquareHeight,
|
|
squareX: newSquareX,
|
|
squareY: newSquareY
|
|
});
|
|
},
|
|
|
|
// 结束调整方块尺寸
|
|
onResizeEnd() {
|
|
this.setData({ isResizing: false });
|
|
}
|
|
});
|