From f49819a63394030a727844f367e764eebc8581ca Mon Sep 17 00:00:00 2001 From: Maxim Kulikov Date: Sun, 1 Dec 2019 14:45:17 +0200 Subject: [PATCH 1/2] more precise resize when ratio is fixed: bigger dimension is a master, smaller dimension is a slave --- src/utils.js | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/src/utils.js b/src/utils.js index ac4ef28..9881b92 100644 --- a/src/utils.js +++ b/src/utils.js @@ -67,8 +67,13 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig height = heightAndDeltaH.height deltaH = heightAndDeltaH.deltaH if (ratio) { - deltaW = deltaH * ratio - width = height * ratio + if (ratio > 1) { + height = width / ratio + deltaH = deltaW / ratio + } else { + width = height * ratio + deltaW = deltaH * ratio + } } centerX += deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle) centerY += deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle) @@ -82,8 +87,13 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig height = heightAndDeltaH.height deltaH = heightAndDeltaH.deltaH if (ratio) { - deltaW = deltaH * ratio - width = height * ratio + if (ratio > 1) { + height = width / ratio + deltaH = deltaW / ratio + } else { + width = height * ratio + deltaW = deltaH * ratio + } } centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle) centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle) @@ -115,8 +125,13 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig height = heightAndDeltaH.height deltaH = heightAndDeltaH.deltaH if (ratio) { - height = width / ratio - deltaH = deltaW / ratio + if (ratio > 1) { + height = width / ratio + deltaH = deltaW / ratio + } else { + width = height * ratio + deltaW = deltaH * ratio + } } centerX -= deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle) centerY -= deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle) @@ -150,8 +165,13 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig height = heightAndDeltaH.height deltaH = heightAndDeltaH.deltaH if (ratio) { - width = height * ratio - deltaW = deltaH * ratio + if (ratio > 1) { + height = width / ratio + deltaH = deltaW / ratio + } else { + width = height * ratio + deltaW = deltaH * ratio + } } centerX -= deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle) centerY -= deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle) From c98ee757e30b727c8aa240a2b3c123e981b8e948 Mon Sep 17 00:00:00 2001 From: Maxim Kulikov Date: Sun, 1 Dec 2019 16:52:53 +0200 Subject: [PATCH 2/2] pin position of an opposit anchor point during resize with an edge middle anchor point when rect has fixed ratio --- src/utils.js | 42 +++++++++++------------------------------- 1 file changed, 11 insertions(+), 31 deletions(-) diff --git a/src/utils.js b/src/utils.js index 9881b92..ad0939b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -46,16 +46,11 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig width = widthAndDeltaW.width deltaW = widthAndDeltaW.deltaW if (ratio) { - deltaH = deltaW / ratio height = width / ratio - // 左上角固定 - centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle) - centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle) - } else { - // 左边固定 - centerX += deltaW / 2 * cos(rotateAngle) - centerY += deltaW / 2 * sin(rotateAngle) } + // 左边固定 + centerX += deltaW / 2 * cos(rotateAngle) + centerY += deltaW / 2 * sin(rotateAngle) break } case 'tr': { @@ -104,16 +99,11 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig height = heightAndDeltaH.height deltaH = heightAndDeltaH.deltaH if (ratio) { - deltaW = deltaH * ratio width = height * ratio - // 左上角固定 - centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle) - centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle) - } else { - // 上边固定 - centerX -= deltaH / 2 * sin(rotateAngle) - centerY += deltaH / 2 * cos(rotateAngle) } + // 上边固定 + centerX -= deltaH / 2 * sin(rotateAngle) + centerY += deltaH / 2 * cos(rotateAngle) break } case 'bl': { @@ -144,15 +134,10 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig deltaW = widthAndDeltaW.deltaW if (ratio) { height = width / ratio - deltaH = deltaW / ratio - // 右上角固定 - centerX -= deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle) - centerY -= deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle) - } else { - // 右边固定 - centerX -= deltaW / 2 * cos(rotateAngle) - centerY -= deltaW / 2 * sin(rotateAngle) } + // 右边固定 + centerX -= deltaW / 2 * cos(rotateAngle) + centerY -= deltaW / 2 * sin(rotateAngle) break } case 'tl': { @@ -184,14 +169,9 @@ export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeig deltaH = heightAndDeltaH.deltaH if (ratio) { width = height * ratio - deltaW = deltaH * ratio - // 左下角固定 - centerX += deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle) - centerY += deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle) - } else { - centerX += deltaH / 2 * sin(rotateAngle) - centerY -= deltaH / 2 * cos(rotateAngle) } + centerX += deltaH / 2 * sin(rotateAngle) + centerY -= deltaH / 2 * cos(rotateAngle) break } }