danny
/
vue-webtopo-svgeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 旋转后缩放问题

Browse Source
Re-1.0
咬轮猫 3 years ago
parent e0d7bf0f6d
commit 3bf7170b54
2 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File

50
src/components/webtopo-svgedit/components/center-panel/index.vue
Unescape Escape View File

@ -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) {

40
src/utils/scale-core.ts
Unescape Escape View File

@ -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,

Write Preview
Loading…
Cancel
Save