Skip to content

Commit abe78b6

Browse files
ioslhioslh
committed
fix
1 parent a1019f4 commit abe78b6

File tree

11 files changed

+323
-5
lines changed

11 files changed

+323
-5
lines changed

‎rotateResize.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import EndPoints from './src/EndPoints'
2+
13
const PRECISION = 1e-5
24

35
const roughlyEqual = (x, y, precision = PRECISION) => Math.abs(x - y) < precision
@@ -36,6 +38,16 @@ export const computeRectWithCrossPoints = (pa, pb, angle) => {
3638
}
3739
}
3840

41+
/**
42+
* 返回 start 点相对于 center 点的对称点
43+
* @param {*} start
44+
* @param {*} center
45+
*/
46+
export const computeSymmetryPoint = (start, center) => {
47+
const [x, y] = ['x', 'y'].map(k => start[k] + 2 * (center[k] - start[k]))
48+
return { x, y }
49+
}
50+
3951
/**
4052
* 根据一条线段（由 pinnedPoints 两点确定），拖拽点坐标（dragPoint），以及倾斜角度（angle）返回一个确定的矩形
4153
* @param {Object[]} pinnedPoints
@@ -317,8 +329,7 @@ const rotateRect = (mouseStart, mouseEnd, rectStart) => {
317329
* @param {*} fixedRatio
318330
*/
319331
const resizeRect = (mouseStart, mouseEnd, adjustType, rectStart, fixedRatio) => {
320-
const e = computeEndPoints(rectStart)
321-
332+
const e = new EndPoints(rectStart)
322333
let activeExpand = null
323334
let acrossPoints = []
324335
let fixedMouseEnd = mouseEnd
@@ -381,15 +392,17 @@ const resizeRect = (mouseStart, mouseEnd, adjustType, rectStart, fixedRatio) =>
381392
}
382393

383394
const { length } = pinnedPoints
395+
let result
384396
if (length === 1) {
385-
return computeRectWithCrossPoints(pinnedPoints[0], fixedMouseEnd, rectStart.r)
397+
result = computeRectWithCrossPoints(pinnedPoints[0], fixedMouseEnd, rectStart.r)
386398
} else if (length === 2) {
387399
if (fixedRatio) {
388-
return computeRatioedRectWithPinnedLine(pinnedPoints, fixedMouseEnd, rectStart, activeExpand)
400+
result = computeRatioedRectWithPinnedLine(pinnedPoints, fixedMouseEnd, rectStart, activeExpand)
389401
} else {
390-
return computeRectWithPinnedLine(pinnedPoints, fixedMouseEnd, rectStart.r)
402+
result = computeRectWithPinnedLine(pinnedPoints, fixedMouseEnd, rectStart.r)
391403
}
392404
}
405+
return result
393406
}
394407

395408
/**

‎src/EndPoints.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { rotatePositionRelatively } from './rotate'
2+
import rectCenter from './rectCenter'
3+
import symmetryPoint from './symmetryPoint'
4+
import centerPoint from './centerPoint'
5+
6+
export default class EndPoints {
7+
constructor(rect) {
8+
this.rect = rect
9+
this._p0 = null
10+
this._p1 = null
11+
this._p2 = null
12+
this._p3 = null
13+
this._lt = null
14+
this._rt = null
15+
this._rb = null
16+
this._lb = null
17+
this._ct = null
18+
this._cb = null
19+
this._rm = null
20+
this._lm = null
21+
this._center = null
22+
}
23+
24+
get center() {
25+
if (!this._center) {
26+
this._center = rectCenter(this.rect)
27+
}
28+
return this._center
29+
}
30+
31+
get lt () {
32+
if (!this._p0) {
33+
const { x, y, r } = this.rect
34+
this._p0 = rotatePositionRelatively({ x, y }, this.center, r)
35+
}
36+
return this._p0
37+
}
38+
39+
get rt() {
40+
if (!this._p1) {
41+
const { x, y, w, r } = this.rect
42+
this._p1 = rotatePositionRelatively(
43+
{ x: x + w, y },
44+
this.center,
45+
r
46+
)
47+
}
48+
return this._p1
49+
}
50+
51+
get rb() {
52+
if (!this._p2) {
53+
this._p2 = symmetryPoint(this.p0, this.center)
54+
}
55+
return this._p2
56+
}
57+
58+
get lb() {
59+
if (!this._p3) {
60+
this._p3 = symmetryPoint(this.p1, this.center)
61+
}
62+
return this._p3
63+
}
64+
65+
get ct() {
66+
if (!this._ct) {
67+
this._ct = centerPoint(this.p0, this.p1)
68+
}
69+
return this._ct
70+
}
71+
72+
get cb() {
73+
if (!this._cb) {
74+
this._cb = centerPoint(this.p2, this.p3)
75+
}
76+
return this._cb
77+
}
78+
79+
get rm() {
80+
if (!this._rm) {
81+
this._rm = centerPoint(this.p1, this.p2)
82+
}
83+
return this._rm
84+
}
85+
86+
get lm() {
87+
if (!this._lm) {
88+
this._lm = centerPoint(this.p0, this.p3)
89+
}
90+
return this._lm
91+
}
92+
}

‎src/angleDegrees.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default point => {
2+
const { x, y } = point
3+
return Math.atan2(y, x) * 180 / Math.PI
4+
}

‎src/centerPoint.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default (pa, pb) => ({
2+
x: (pa.x + pb.x) / 2,
3+
y: (pa.y + pb.y) / 2
4+
})

‎src/computeRotation.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import angleDegrees from './angleDegrees'
2+
3+
export default (center, start, end) => {
4+
const shiftStart = {
5+
x: start.x - center.x,
6+
y: start.y - center.y
7+
}
8+
const shiftEnd = {
9+
x: end.x - center.x,
10+
y: end.y - center.y
11+
}
12+
const startDegrees = angleDegrees(shiftStart)
13+
const endDegrees = angleDegrees(shiftEnd)
14+
return endDegrees - startDegrees
15+
}

‎src/index.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { rotatePositionRelatively } from './rotate'
2+
import rectCenter from './rectCenter'
3+
import symmetryPoint from './symmetryPoint'
4+
import centerPoint from './centerPoint'
5+
import computeRotation from './computeRotation'
6+
7+
class Controller {
8+
constructor(options) {
9+
this.adjustType = options.adjustType
10+
this.mouseStart = options.mouseStart
11+
this.mouseEnd = options.mouseEnd
12+
this.rectStart = options.rectStart
13+
this.isFixedRatio = options.isFixedRatio
14+
15+
this._p0 = null
16+
this._p1 = null
17+
this._p2 = null
18+
this._p3 = null
19+
this._lt = null
20+
this._rt = null
21+
this._rb = null
22+
this._lb = null
23+
this._ct = null
24+
this._cb = null
25+
this._rm = null
26+
this._lm = null
27+
this._center = null
28+
}
29+
30+
moveRect() {
31+
const [x, y] = ['x', 'y'].map(k =>
32+
this.mouseEnd[k] - this.mouseStart[k]
33+
)
34+
return {
35+
...this.rectStart,
36+
x: this.rectStart.x + x,
37+
y: this.rectStart.y + y
38+
}
39+
}
40+
41+
rotateRect() {
42+
// const shrotcutRotations = [-180, -135, -90, -45, 0, 45, 90, 135, 180]
43+
const offsetRotation = computeRotation(this.center, mouseStart, mouseEnd)
44+
let nextRotation = this.rectStart.r + offsetRotation
45+
if (nextRotation >= 180) {
46+
nextRotation = nextRotation - 360
47+
}
48+
if (nextRotation <= -180) {
49+
nextRotation = nextRotation + 360
50+
}
51+
return {
52+
...this.rectStart,
53+
r: nextRotation
54+
}
55+
}
56+
57+
resizeRect() {
58+
59+
}
60+
61+
// key end points
62+
get center() {
63+
if (!this._center) {
64+
this._center = rectCenter(this.rectStart)
65+
}
66+
return this._center
67+
}
68+
69+
get lt () {
70+
if (!this._p0) {
71+
const { x, y, r } = this.rectStart
72+
this._p0 = rotatePositionRelatively({ x, y }, this.center, r)
73+
}
74+
return this._p0
75+
}
76+
77+
get rt() {
78+
if (!this._p1) {
79+
const { x, y, w, r } = this.rectStart
80+
this._p1 = rotatePositionRelatively(
81+
{ x: x + w, y },
82+
this.center,
83+
r
84+
)
85+
}
86+
return this._p1
87+
}
88+
89+
get rb() {
90+
if (!this._p2) {
91+
this._p2 = symmetryPoint(this.p0, this.center)
92+
}
93+
return this._p2
94+
}
95+
96+
get lb() {
97+
if (!this._p3) {
98+
this._p3 = symmetryPoint(this.p1, this.center)
99+
}
100+
return this._p3
101+
}
102+
103+
get ct() {
104+
if (!this._ct) {
105+
this._ct = centerPoint(this.p0, this.p1)
106+
}
107+
return this._ct
108+
}
109+
110+
get cb() {
111+
if (!this._cb) {
112+
this._cb = centerPoint(this.p2, this.p3)
113+
}
114+
return this._cb
115+
}
116+
117+
get rm() {
118+
if (!this._rm) {
119+
this._rm = centerPoint(this.p1, this.p2)
120+
}
121+
return this._rm
122+
}
123+
124+
get lm() {
125+
if (!this._lm) {
126+
this._lm = centerPoint(this.p0, this.p3)
127+
}
128+
return this._lm
129+
}
130+
131+
}

‎src/moveRect.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default (mouseStart, mouseEnd, rect) => {
2+
const x = mouseEnd.x - mouseStart.x
3+
const y = mouseEnd.y - mouseStart.y
4+
return {
5+
...rect,
6+
x: rect.x + x,
7+
y: rect.y + y
8+
}
9+
}

‎src/rectCenter.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default rect => {
2+
const { x, y, w, h } = rect
3+
return {
4+
x: x + w / 2,
5+
y: y + h / 2
6+
}
7+
}

‎src/rotate.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* 页面坐标点 position 以页面左上角为原点，顺时针旋转 angle 角度后得到的坐标点
3+
* @param {Object} position
4+
* @param {Number} angle
5+
*/
6+
export const rotatePosition = (position, angle) => {
7+
const radical = angle / 180 * Math.PI
8+
const sinA = Math.sin(radical)
9+
const cosA = Math.cos(radical)
10+
const { x, y } = position
11+
return {
12+
x: x * cosA - y * sinA,
13+
y: x * sinA + y * cosA
14+
}
15+
}
16+
17+
/**
18+
* 页面坐标点 position 以 relative 点为原点
19+
* 顺时针旋转 angle 角度后得到的坐标点
20+
* @param {Object} position
21+
* @param {Object} relative
22+
* @param {Number} angle
23+
*/
24+
export const rotatePositionRelatively = (position, relative, angle) => {
25+
const shiftPosition = {
26+
x: position.x - relative.x,
27+
y: position.y - relative.y
28+
}
29+
const resultPosition = rotatePosition(shiftPosition, angle)
30+
return {
31+
x: resultPosition.x + relative.x,
32+
y: resultPosition.y + relative.y
33+
}
34+
}

‎src/rotateRect.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import rectCenter from './rectCenter'
2+
3+
export default (mouseStart, mouseEnd, rect) => {
4+
// const center =
5+
}

0 commit comments

Comments
 (0)