From 730a9c9acf988672750bb994796f1094b77e7e07 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 26 Sep 2021 22:27:39 +0800 Subject: [PATCH] fix: update scale-top-direction for element --- packages/core/examples/features/css/index.css | 4 +- .../core/examples/features/lib/data/rect.js | 8 +- packages/core/examples/features/lib/main.js | 2 +- packages/core/src/lib/element.ts | 91 ++++++++++--------- 4 files changed, 53 insertions(+), 52 deletions(-) diff --git a/packages/core/examples/features/css/index.css b/packages/core/examples/features/css/index.css index b9f15ca..a594d2c 100644 --- a/packages/core/examples/features/css/index.css +++ b/packages/core/examples/features/css/index.css @@ -13,8 +13,8 @@ html, body { background-image: linear-gradient(#aaaaaa2a 1px, transparent 0), linear-gradient(90deg, #aaaaaa2a 1px, transparent 0), - linear-gradient(#aaaaaa1a 1px, transparent 0), - linear-gradient(90deg, #aaaaaa1a 1px, transparent 0); + linear-gradient(#aaaaaa4a 1px, transparent 0), + linear-gradient(90deg, #aaaaaa4a 1px, transparent 0); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; } diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 88b508e..6d2c9e9 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -35,12 +35,12 @@ const data = { }, { name: "rect-003", - x: 160, - y: 160, - w: 200, + x: 250, + y: 150, + w: 150, h: 20, type: "rect", - angle: 60, + angle: 45, desc: { bgColor: "#c0c0c0", borderRadius: 20, diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index eed6942..12b7e44 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -34,7 +34,7 @@ const core = new Core(mount, { color: '#e91e63', dotSize: 8, lineWidth: 1, - lineDash: [12, 12], + // lineDash: [12, 12], }, }); diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index c9221b4..4de4463 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -116,18 +116,10 @@ export class Element { break; } case 'top': { - if (elem.h - moveY > 0) { - // elem.y += moveY; - const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // // elem.x = p.x; - elem.y = p.y; - elem.h = p.h; - // console.log(p); - - // elem.y += moveY; - // elem.h -= moveY; - } - + const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + elem.x = p.x; + elem.y = p.y; + elem.h = p.h; break; } case 'top-right': { @@ -231,42 +223,51 @@ function calcuScaleElemPosition( break; } case 'top': { - // // console.log('elem.angle =', elem.angle, moveY); - if (elem.angle <= 90 && elem.angle > 0) { - // const radian = parseRadian(elem.angle); - // let moveDist = 0; - // if (elem.angle < 45) { - // moveDist = moveY / Math.cos(radian) - // } else { - // moveDist = -moveX / Math.sin(radian) - // } - // let centerX = p.x + elem.w / 2; - // let centerY = p.y + elem.h / 2; - // centerX = centerX - moveDist * Math.sin(radian); - // centerY = centerY + moveDist * Math.cos(radian); - // if (p.h - moveDist > 0) { - // p.h = p.h - moveDist; - // p.x = centerX - p.w / 2; - // p.y = centerY - p.h / 2; - // } - - const radian = parseRadian(elem.angle); - let moveDist = 0; - if (elem.angle < 45) { - moveDist = moveY / Math.cos(radian) - } else { - moveDist = -moveX / Math.sin(radian) - } - if (p.h - moveDist > 0) { - p.h = p.h - moveDist; - p.x = p.x - moveDist * Math.sin(radian) - p.y = p.y + moveDist * Math.cos(radian); - } - - } else { + if (elem.angle === 0) { p.y += moveY; p.h -= moveY; + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = moveY; + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + if (angle < 90) { + moveDist = -moveY; // TODO + const radian = parseRadian(angle); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } else if (angle < 180) { + moveDist = moveX; // TODO + const radian = parseRadian(angle - 90); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } else if (angle < 270) { + moveDist = moveY; // TODO + const radian = parseRadian(angle - 180); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); + } else if (angle < 360) { + moveDist = -moveX; // TODO + const radian = parseRadian(angle - 270); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.cos(radian); + centerY = centerY - centerMoveDist * Math.sin(radian); + } + if (p.h + moveDist > 0) { + p.h = p.h + moveDist; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; + } + } else { + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; + } } + break; } case 'top-right': {