면 폴리곤 생성
This commit is contained in:
yjnoh
parent
dec99ba674
commit
9e075deb91
@ -1,9 +1,15 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
import QPolygon from '@/components/fabric/QPolygon'
|
||||
import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
|
||||
import {
|
||||
findTopTwoIndexesByDistance,
|
||||
getCenterPoint,
|
||||
getDirection,
|
||||
getStartIndex,
|
||||
rearrangeArray,
|
||||
} from '@/util/canvas-util'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
|
||||
import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
|
||||
export const Mode = {
|
||||
@ -29,6 +35,7 @@ export function useMode() {
|
||||
const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
|
||||
const [roof, setRoof] = useRecoilState(roofState)
|
||||
const [wall, setWall] = useRecoilState(wallState)
|
||||
const [templatePolygonState, setTemplatePolygonState] = useRecoilState(templatePolygonArrayState)
|
||||
|
||||
const addEvent = (mode) => {
|
||||
switch (mode) {
|
||||
@ -68,7 +75,7 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const editMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
const circle = new fabric.Circle({
|
||||
radius: 1,
|
||||
@ -219,7 +226,7 @@ export function useMode() {
|
||||
}
|
||||
|
||||
const textboxMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
if (canvas?.getActiveObject()?.type === 'textbox') return
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
|
||||
@ -234,14 +241,14 @@ export function useMode() {
|
||||
canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
|
||||
canvas?.renderAll()
|
||||
// textbox가 active가 풀린 경우 editing mode로 변경
|
||||
textbox?.on('editing:exited', function () {
|
||||
textbox?.on('editing:exited', function() {
|
||||
changeMode(canvas, Mode.EDIT)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const drawLineMode = () => {
|
||||
canvas?.on('mouse:down', function (options) {
|
||||
canvas?.on('mouse:down', function(options) {
|
||||
const pointer = canvas?.getPointer(options.e)
|
||||
|
||||
const line = new QLine(
|
||||
@ -262,7 +269,7 @@ export function useMode() {
|
||||
|
||||
const drawRectMode = () => {
|
||||
let rect, isDown, origX, origY
|
||||
canvas.on('mouse:down', function (o) {
|
||||
canvas.on('mouse:down', function(o) {
|
||||
isDown = true
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
origX = pointer.x
|
||||
@ -282,7 +289,7 @@ export function useMode() {
|
||||
canvas.add(rect)
|
||||
})
|
||||
|
||||
canvas.on('mouse:move', function (o) {
|
||||
canvas.on('mouse:move', function(o) {
|
||||
if (!isDown) return
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
if (origX > pointer.x) {
|
||||
@ -296,7 +303,7 @@ export function useMode() {
|
||||
rect.set({ height: Math.abs(origY - pointer.y) })
|
||||
})
|
||||
|
||||
canvas.on('mouse:up', function (o) {
|
||||
canvas.on('mouse:up', function(o) {
|
||||
const pointer = canvas.getPointer(o.e)
|
||||
const qRect = new QRect({
|
||||
left: origX,
|
||||
@ -1018,6 +1025,8 @@ export function useMode() {
|
||||
let lines = []
|
||||
let outLines = []
|
||||
|
||||
let halfLength = 0
|
||||
|
||||
const dashedCenterLineOpt = {
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
@ -1119,6 +1128,7 @@ export function useMode() {
|
||||
let lastLine = lines[5]
|
||||
let vertCenterLine
|
||||
let secondVertCenterLine
|
||||
let templatePolygonObj = {}
|
||||
|
||||
if (prevHighIndex === 1) {
|
||||
if (horizontalDirection === 'left') {
|
||||
@ -1139,6 +1149,7 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
outLines.push(vertCenterLine)
|
||||
|
||||
//긴면 가로선 그리기
|
||||
let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
|
||||
@ -1160,11 +1171,12 @@ export function useMode() {
|
||||
)
|
||||
canvas.add(horiCenterLine2)
|
||||
|
||||
|
||||
//작은 지붕쪽 높이 길이를 구하는 로직
|
||||
let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
|
||||
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
|
||||
|
||||
canvas.add(secondVertCenterLine)
|
||||
outLines.push(secondVertCenterLine)
|
||||
|
||||
//작은 지붕쪽 너비 길이를 구한는 로직
|
||||
let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
|
||||
@ -1188,6 +1200,7 @@ export function useMode() {
|
||||
}
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
outLines.push(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1196,22 +1209,26 @@ export function useMode() {
|
||||
const lastOuterLine = lines[5]
|
||||
|
||||
//첫번째 외곽선 1번
|
||||
let halfLength = firstOuterLine.length / 2
|
||||
halfLength = firstOuterLine.length / 2
|
||||
let drawFirstLine1 = new QLine(
|
||||
[firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawFirstLine1)
|
||||
outLines.push(drawFirstLine1)
|
||||
|
||||
//첫번째 외곽선 2번
|
||||
let drawFirstLine2 = new QLine(
|
||||
[drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawFirstLine2)
|
||||
outLines.push(drawFirstLine2)
|
||||
|
||||
//중간라인 외각선
|
||||
let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], centerLineOpt)
|
||||
canvas.add(drawMiddleLine)
|
||||
outLines.push(drawMiddleLine)
|
||||
|
||||
//마지막 외각선
|
||||
halfLength = lastLine.length / 2
|
||||
@ -1220,21 +1237,31 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastLine1)
|
||||
outLines.push(drawLastLine1)
|
||||
|
||||
let drawLastLine2 = new QLine(
|
||||
[drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastLine2)
|
||||
outLines.push(drawLastLine2)
|
||||
|
||||
let drawLastInLine1 = new QLine(
|
||||
[secondVertCenterLine.x1, secondVertCenterLine.y1, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y1],
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawLastInLine1)
|
||||
outLines.push(drawLastInLine1)
|
||||
|
||||
let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
|
||||
canvas.add(drawLastInLine2)
|
||||
outLines.push(drawLastInLine2)
|
||||
|
||||
const bigPolygon = [
|
||||
{ x1: outLines[2].x1, y1: outLines[2].y1 },
|
||||
]
|
||||
|
||||
|
||||
} else {
|
||||
//아래쪽 길게 오른쪽 방향
|
||||
//배열 순서대로 뒤에꺼를 찾아서 계산한다
|
||||
@ -1315,7 +1342,7 @@ export function useMode() {
|
||||
const lastOuterLine = lines[3]
|
||||
|
||||
//첫번째 외곽선 1번
|
||||
let halfLength = firstOuterLine.length / 2
|
||||
halfLength = firstOuterLine.length / 2
|
||||
let drawFirstLine1 = new QLine(
|
||||
[firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge],
|
||||
centerLineOpt,
|
||||
@ -1438,7 +1465,7 @@ export function useMode() {
|
||||
const lastOuterLine = lines[1]
|
||||
|
||||
//첫번째 외곽선 1번
|
||||
let halfLength = firstOuterLine.length / 2
|
||||
halfLength = firstOuterLine.length / 2
|
||||
let drawFirstLine1 = new QLine(
|
||||
[firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
@ -1561,7 +1588,7 @@ export function useMode() {
|
||||
const lastOuterLine = lines[3]
|
||||
|
||||
//첫번째 외곽선 1번
|
||||
let halfLength = firstOuterLine.length / 2
|
||||
halfLength = firstOuterLine.length / 2
|
||||
let drawFirstLine1 = new QLine(
|
||||
[firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge],
|
||||
centerLineOpt,
|
||||
|
||||
@ -35,3 +35,9 @@ export const wallState = atom({
|
||||
default: {},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
export const templatePolygonArrayState = atom({
|
||||
key: 'templatePolygon',
|
||||
default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
|
||||
})
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { atan2, chain, derivative, e, evaluate, log, pi, pow, round, sqrt, intersect } from 'mathjs'
|
||||
import { intersect } from 'mathjs'
|
||||
|
||||
/**
|
||||
* Collection of function to use on canvas
|
||||
@ -38,7 +38,7 @@ export function actionHandler(eventData, transform, x, y) {
|
||||
|
||||
// define a function that can keep the polygon in the same position when we change its width/height/top/left
|
||||
export function anchorWrapper(anchorIndex, fn) {
|
||||
return function (eventData, transform, x, y) {
|
||||
return function(eventData, transform, x, y) {
|
||||
let fabricObject = transform.target
|
||||
let originX = fabricObject?.points[anchorIndex].x - fabricObject.pathOffset.x
|
||||
let originY = fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y
|
||||
@ -447,4 +447,4 @@ export function calculateDistance(point, line) {
|
||||
const numerator = Math.abs((y2 - y1) * x0 - (x2 - x1) * y0 + x2 * y1 - y2 * x1)
|
||||
const denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2))
|
||||
return numerator / denominator
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user