feat: Add getCenterPoint and getDistance functions to canvas-util.js
This commit is contained in:
yoosangwook
parent
876ad15eb0
commit
8782ae677e
@ -37,6 +37,8 @@ export default function Roof2() {
|
||||
|
||||
const [angle, setAngle] = useState(0)
|
||||
|
||||
const [showControl, setShowControl] = useState(false)
|
||||
|
||||
const {
|
||||
mode,
|
||||
changeMode,
|
||||
@ -47,6 +49,7 @@ export default function Roof2() {
|
||||
zoom,
|
||||
togglePolygonLine,
|
||||
handleOuterlinesTest2,
|
||||
applyTemplateB,
|
||||
} = useMode()
|
||||
|
||||
useEffect(() => {
|
||||
@ -239,6 +242,10 @@ export default function Roof2() {
|
||||
const lines = togglePolygonLine(polygon)
|
||||
}
|
||||
|
||||
const handleShowController = () => {
|
||||
setShowControl(!showControl)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{canvas && (
|
||||
@ -282,7 +289,7 @@ export default function Roof2() {
|
||||
<Button
|
||||
className="m-1 p-2"
|
||||
color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
|
||||
onClick={() => {}}
|
||||
onClick={applyTemplateB}
|
||||
>
|
||||
템플릿(B 패턴)
|
||||
</Button>
|
||||
@ -356,8 +363,21 @@ export default function Roof2() {
|
||||
<Button className="m-1 p-2" onClick={PolygonToLine}>
|
||||
PolygonToLine
|
||||
</Button>
|
||||
<Button
|
||||
className="m-1 p-2"
|
||||
color={`${showControl ? 'primary' : 'default'}`}
|
||||
onClick={handleShowController}
|
||||
>
|
||||
canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-center flex-col items-center">
|
||||
<div
|
||||
className={
|
||||
showControl
|
||||
? `flex justify-center flex-col items-center`
|
||||
: `hidden`
|
||||
}
|
||||
>
|
||||
<div className="m-2 p-2 w-80">
|
||||
<RangeSlider
|
||||
title={`각도${angle}`}
|
||||
|
||||
@ -6,6 +6,9 @@ import {
|
||||
rearrangeArray,
|
||||
findTopTwoIndexesByDistance,
|
||||
getDirection,
|
||||
getOddEvenPoints,
|
||||
findLongestDistancePair,
|
||||
getCenterPoint,
|
||||
} from '@/util/canvas-util'
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil'
|
||||
import {
|
||||
@ -201,24 +204,47 @@ export function useMode() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 마우스로 그린 점 기준으로 외벽선을 완성시켜준다.
|
||||
* makePolygon 함수에 포함되어있던 내용을 다른 템플릿 적용에서도 사용할수 있도록 함수로 대체
|
||||
*/
|
||||
const drawWallPolygon = () => {
|
||||
const firstPoint = historyPoints.current[0]
|
||||
const lastPoint = historyPoints.current[historyPoints.current.length - 1]
|
||||
historyPoints.current.forEach((point) => {
|
||||
canvas?.remove(point)
|
||||
})
|
||||
drawLineWithLength(lastPoint, firstPoint)
|
||||
points.current = []
|
||||
historyPoints.current = []
|
||||
|
||||
// handleOuterlines()
|
||||
const wall = makePolygon()
|
||||
setWall(wall)
|
||||
|
||||
return wall
|
||||
}
|
||||
|
||||
const templateMode = () => {
|
||||
changeMode(canvas, Mode.EDIT)
|
||||
|
||||
if (historyPoints.current.length >= 4) {
|
||||
const firstPoint = historyPoints.current[0]
|
||||
const lastPoint = historyPoints.current[historyPoints.current.length - 1]
|
||||
historyPoints.current.forEach((point) => {
|
||||
canvas?.remove(point)
|
||||
})
|
||||
drawLineWithLength(lastPoint, firstPoint)
|
||||
points.current = []
|
||||
historyPoints.current = []
|
||||
drawWallPolygon()
|
||||
//아래 내용 drawWallPolygon()으로 대체
|
||||
// const firstPoint = historyPoints.current[0]
|
||||
// const lastPoint = historyPoints.current[historyPoints.current.length - 1]
|
||||
// historyPoints.current.forEach((point) => {
|
||||
// canvas?.remove(point)
|
||||
// })
|
||||
// drawLineWithLength(lastPoint, firstPoint)
|
||||
// points.current = []
|
||||
// historyPoints.current = []
|
||||
|
||||
// // handleOuterlines()
|
||||
// const wall = makePolygon()
|
||||
// setWall(wall)
|
||||
|
||||
// handleOuterlines()
|
||||
handleOuterlinesTest() //외곽선 그리기 테스트
|
||||
|
||||
const wall = makePolygon()
|
||||
setWall(wall)
|
||||
}
|
||||
}
|
||||
|
||||
@ -895,6 +921,171 @@ export function useMode() {
|
||||
return rtnLines
|
||||
}
|
||||
|
||||
/**
|
||||
* 템플릿 B 적용
|
||||
* 1. 모드 체인지
|
||||
* 2. 외벽선 그리기 마무리
|
||||
*/
|
||||
const applyTemplateB = () => {
|
||||
changeMode(canvas, Mode.EDIT)
|
||||
const polygon = drawWallPolygon()
|
||||
handleOuterLineTemplateB(polygon)
|
||||
}
|
||||
|
||||
const handleOuterLineTemplateB = (polygon) => {
|
||||
polygon.points.forEach((point, index) => {
|
||||
let x2 =
|
||||
index === polygon.points.length - 1
|
||||
? polygon.points[0].x
|
||||
: polygon.points[index + 1].x
|
||||
let y2 =
|
||||
index === polygon.points.length - 1
|
||||
? polygon.points[0].y
|
||||
: polygon.points[index + 1].y
|
||||
|
||||
let x1 = point.x
|
||||
let y1 = point.y
|
||||
if (index % 2 === 0) {
|
||||
if (polygon.lines[index].direction === 'bottom') {
|
||||
y1 = y1 - 50
|
||||
y2 = y2 + 50
|
||||
x1 = x1 - 20
|
||||
x2 = x2 - 20
|
||||
} else {
|
||||
y1 = y1 + 50
|
||||
y2 = y2 - 50
|
||||
x1 = x1 + 20
|
||||
x2 = x2 + 20
|
||||
}
|
||||
} else {
|
||||
if (polygon.lines[index].direction === 'right') {
|
||||
x1 = x1 - 20
|
||||
x2 = x2 + 20
|
||||
y1 = y1 + 50
|
||||
y2 = y2 + 50
|
||||
} else {
|
||||
x1 = x1 + 20
|
||||
x2 = x2 - 20
|
||||
y1 = y1 - 50
|
||||
y2 = y2 - 50
|
||||
}
|
||||
}
|
||||
|
||||
switch (polygon.shape) {
|
||||
case 1:
|
||||
break
|
||||
case 2:
|
||||
const centerPoint =
|
||||
polygon.points[3].y +
|
||||
(polygon.points[2].y - polygon.points[3].y) / 2
|
||||
if (index === 0) {
|
||||
const subLine = new QLine(
|
||||
[
|
||||
point.x - 20,
|
||||
polygon.points[0].y +
|
||||
(polygon.points[1].y - polygon.points[0].y) / 2,
|
||||
polygon.points[5].x + 20,
|
||||
polygon.points[0].y +
|
||||
(polygon.points[1].y - polygon.points[0].y) / 2,
|
||||
],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
},
|
||||
)
|
||||
canvas.add(subLine)
|
||||
}
|
||||
if (index === 3) {
|
||||
x2 = x2 + 20
|
||||
|
||||
const subLine = new QLine([x2, y2, x2, centerPoint], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
})
|
||||
canvas.add(subLine)
|
||||
}
|
||||
if (index === 4) {
|
||||
y1 =
|
||||
point.y +
|
||||
(polygon.points[index - 2].y - polygon.points[index - 1].y) / 2
|
||||
|
||||
const subLine = new QLine(
|
||||
[point.x, centerPoint, polygon.points[2].x + 20, centerPoint],
|
||||
{
|
||||
stroke: 'blue',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
},
|
||||
)
|
||||
canvas.add(subLine)
|
||||
|
||||
const subVerticalLine = new QLine(
|
||||
[
|
||||
getCenterPoint(point.x, polygon.points[2].x + 20),
|
||||
polygon.points[3].y - 50,
|
||||
getCenterPoint(point.x, polygon.points[2].x + 20),
|
||||
centerPoint,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
strokeDashArray: [5, 5],
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
},
|
||||
)
|
||||
canvas.add(subVerticalLine)
|
||||
}
|
||||
|
||||
if (index === 5) {
|
||||
const centeredPoint = getCenterPoint(
|
||||
polygon.points[0].x,
|
||||
polygon.points[5].x,
|
||||
)
|
||||
const verticalSubLine = new QLine(
|
||||
[
|
||||
centeredPoint,
|
||||
polygon.points[0].y - 50,
|
||||
centeredPoint,
|
||||
polygon.points[1].y + 50,
|
||||
],
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
strokeDashArray: [5, 5],
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
},
|
||||
)
|
||||
|
||||
canvas.add(verticalSubLine)
|
||||
}
|
||||
|
||||
break
|
||||
case 3:
|
||||
break
|
||||
case 4:
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
const line = new QLine([x1, y1, x2, y2], {
|
||||
stroke: 'blue',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
})
|
||||
canvas.add(line)
|
||||
})
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
return {
|
||||
mode,
|
||||
changeMode,
|
||||
@ -905,5 +1096,6 @@ export function useMode() {
|
||||
zoom,
|
||||
togglePolygonLine,
|
||||
handleOuterlinesTest2,
|
||||
applyTemplateB,
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,6 +74,24 @@ export function anchorWrapper(anchorIndex, fn) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 두 좌표의 중간점 좌표를 계산해서 반환하는 함수
|
||||
* @param {number} point1
|
||||
* @param {number} point2 방향에 상관없이 항상 큰 값이 뒤에 위치해야 함
|
||||
* @returns
|
||||
*/
|
||||
export const getCenterPoint = (point1, point2) => {
|
||||
return point1 + (point2 - point1) / 2
|
||||
}
|
||||
|
||||
/**
|
||||
* 두 점 사이의 거리를 계산하는 함수
|
||||
* @param {*} x1 첫번째 점 x좌표
|
||||
* @param {*} y1 첫번째 점 y좌표
|
||||
* @param {*} x2 두번째 점 x좌표
|
||||
* @param {*} y2 두번째 점 y좌표
|
||||
* @returns
|
||||
*/
|
||||
export const getDistance = (x1, y1, x2, y2) => {
|
||||
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user