diff --git a/src/components/webtopo-svgedit/components/center-panel/index.vue b/src/components/webtopo-svgedit/components/center-panel/index.vue index 1c88b80..35ca468 100644 --- a/src/components/webtopo-svgedit/components/center-panel/index.vue +++ b/src/components/webtopo-svgedit/components/center-panel/index.vue @@ -281,7 +281,6 @@ globalStore.handle_svg_info.info.client ); } - console.log('坐标', globalStore.scale_info.symmetric_point, curPositon, new_length); //缩放 // const move_length_x = @@ -307,41 +306,32 @@ //算出缩放倍数 if (globalStore.handle_svg_info && new_length.width > 0 && new_length.height > 0) { const scale_x = !new_length.is_old_width - ? new_length.width / - (globalStore.handle_svg_info.info.actual_bound.width * - globalStore.scale_info.scale_times.x) + ? new_length.width / globalStore.handle_svg_info.info.actual_bound.width : 1; const scale_y = !new_length.is_old_height - ? new_length.height / - (globalStore.handle_svg_info.info.actual_bound.height * - globalStore.scale_info.scale_times.y) + ? new_length.height / globalStore.handle_svg_info.info.actual_bound.height : 1; - // const move_length_x = - // new_length.width - - // globalStore.handle_svg_info.info.actual_bound.width * - // globalStore.scale_info.scale_times.x; - // const move_length_y = - // new_length.height - - // globalStore.handle_svg_info.info.actual_bound.height * - // globalStore.scale_info.scale_times.y; - if (scale_x > 0) { + const newCenterPoint = getCenterPoint(curPositon, globalStore.scale_info.symmetric_point); + const move_length_x = newCenterPoint.x - globalStore.handle_svg_info.info.client.x; + const move_length_y = newCenterPoint.y - globalStore.handle_svg_info.info.client.y; + + if ( + scale_x > 0 && + globalStore.scale_info.type !== EScaleInfoType.TopCenter && + globalStore.scale_info.type !== EScaleInfoType.BottomCenter + ) { globalStore.handle_svg_info.info.scale_x = scale_x; - //现在是沿着中心缩放 后续这里要改下 - // globalStore.handle_svg_info.info.x = - // globalStore.scale_info.type === EScaleInfoType.TopLeft || - // globalStore.scale_info.type === EScaleInfoType.Left || - // globalStore.scale_info.type === EScaleInfoType.BottomLeft - // ? globalStore.scale_info.scale_item_info.x - move_length_x / 2 - // : globalStore.scale_info.scale_item_info.x + move_length_x / 2; + globalStore.handle_svg_info.info.x = + globalStore.scale_info.scale_item_info.x + move_length_x; } - if (scale_y > 0) { + if ( + scale_y > 0 && + globalStore.scale_info.type !== EScaleInfoType.Left && + globalStore.scale_info.type !== EScaleInfoType.Right + ) { globalStore.handle_svg_info.info.scale_y = scale_y; - // globalStore.handle_svg_info.info.y = - // globalStore.scale_info.type === EScaleInfoType.TopLeft || - // globalStore.scale_info.type === EScaleInfoType.TopCenter || - // globalStore.scale_info.type === EScaleInfoType.TopRight - // ? globalStore.scale_info.scale_item_info.y - move_length_y / 2 - // : globalStore.scale_info.scale_item_info.y + move_length_y / 2; + globalStore.handle_svg_info.info.y = + globalStore.scale_info.scale_item_info.y + move_length_y; } } } else if (globalStore.intention === EGlobalStoreIntention.Rotate) { diff --git a/src/utils/scale-core.ts b/src/utils/scale-core.ts index ae93d23..162b19d 100644 --- a/src/utils/scale-core.ts +++ b/src/utils/scale-core.ts @@ -14,7 +14,6 @@ export const calculateLeftTop = ( ) => { //新的中心点坐标 const newCenterPoint = getCenterPoint(curPositon, symmetricPoint); - console.log('left中心坐标', newCenterPoint); const newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate); const newBottomRightPoint = calculateRotatedPointCoordinate( symmetricPoint, @@ -102,19 +101,20 @@ export const calculateLeftBottom = ( is_old_height: false }; }; - +/** + * 顶点中心缩放 + * @param curPositon 按住的缩放按钮的坐标 + * @param symmetricPoint 缩放前对称点的坐标 + * @param rotate 旋转角度 + * @returns + */ export const calculateTop = ( curPositon: IScalePoint, symmetricPoint: IScalePoint, rotate: number, curPoint: IScalePoint ) => { - // 由于用户拉伸时是以任意角度拉伸的,所以在求得旋转前的坐标时,只取 y 坐标(这里的 x 坐标可能是任意值),x 坐标用 curPoint 的。 - // 这个中心点(第二个参数)用 curPoint, center, symmetricPoint 都可以,只要他们在一条直线上就行 const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); - console.log('top中心坐标', rotatedcurPositon); - - // 算出旋转前 y 坐标,再用 curPoint 的 x 坐标,重新计算它们旋转后对应的坐标 const rotatedTopMiddlePoint = calculateRotatedPointCoordinate( { x: curPoint.x, @@ -123,8 +123,6 @@ export const calculateTop = ( curPoint, rotate ); - - // 用旋转后的坐标和对称点算出新的高度(勾股定理) const newHeight = Math.sqrt( (rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2 @@ -136,7 +134,13 @@ export const calculateTop = ( is_old_height: false }; }; - +/** + * 右侧中心缩放 + * @param curPositon 按住的缩放按钮的坐标 + * @param symmetricPoint 缩放前对称点的坐标 + * @param rotate 旋转角度 + * @returns + */ export const calculateRight = ( curPositon: IScalePoint, symmetricPoint: IScalePoint, @@ -165,7 +169,13 @@ export const calculateRight = ( is_old_height: true }; }; - +/** + * 底部中心缩放 + * @param curPositon 按住的缩放按钮的坐标 + * @param symmetricPoint 缩放前对称点的坐标 + * @param rotate 旋转角度 + * @returns + */ export const calculateBottom = ( curPositon: IScalePoint, symmetricPoint: IScalePoint, @@ -194,7 +204,13 @@ export const calculateBottom = ( is_old_height: false }; }; - +/** + * 左侧中心缩放 + * @param curPositon 按住的缩放按钮的坐标 + * @param symmetricPoint 缩放前对称点的坐标 + * @param rotate 旋转角度 + * @returns + */ export const calculateLeft = ( curPositon: IScalePoint, symmetricPoint: IScalePoint,