mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
fix: update scale-top-direction for element
This commit is contained in:
parent
7485d14b98
commit
730a9c9acf
4 changed files with 53 additions and 52 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const core = new Core(mount, {
|
|||
color: '#e91e63',
|
||||
dotSize: 8,
|
||||
lineWidth: 1,
|
||||
lineDash: [12, 12],
|
||||
// lineDash: [12, 12],
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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': {
|
||||
|
|
|
|||
Loading…
Reference in a new issue