template 21,22 추가
This commit is contained in:
yjnoh
parent
6d78779455
commit
7702fddb19
@ -21,7 +21,7 @@ import {
|
||||
} from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
|
||||
import { calculateIntersection, distanceBetweenPoints } from '@/util/canvas-util'
|
||||
import { calculateIntersection, distanceBetweenPoints, getIntersectionPoint } from '@/util/canvas-util'
|
||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||
import ThumbnailList from './ui/ThumbnailLIst'
|
||||
import QContextMenu from './common/context-menu/QContextMenu'
|
||||
@ -30,7 +30,7 @@ import { useAxios } from '@/hooks/useAxios'
|
||||
import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
|
||||
import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
|
||||
import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
|
||||
import { degreesToRadians, radiansToDegrees } from '@turf/turf'
|
||||
import { degreesToRadians, point, radiansToDegrees } from '@turf/turf'
|
||||
|
||||
import InitSettingsModal from './InitSettingsModal'
|
||||
import GridSettingsModal from './GridSettingsModal'
|
||||
@ -1100,6 +1100,234 @@ export default function Roof2(props) {
|
||||
isDrawing = false
|
||||
})
|
||||
}
|
||||
|
||||
const createTemplate21 = () => {
|
||||
const length1 = 500 //Number(prompt('1번'))
|
||||
const length2 = 240 //Number(prompt('2번'))
|
||||
const length3 = 300 //Number(prompt('3번'))
|
||||
const length4 = 200 //Number(prompt('4번'))
|
||||
|
||||
if (length1 < length2) {
|
||||
alert('1번보다 작게 입력해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
if (length3 < length4) {
|
||||
alert('3번보다 작게 입력해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
const pointsArray = [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
]
|
||||
|
||||
const tmpPolygon = new QPolygon(
|
||||
[
|
||||
{ x: 0, y: length3 },
|
||||
{ x: length1 - length2, y: length3 },
|
||||
{ x: (length1 - length2) / 2, y: length3 - length3 },
|
||||
],
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black', //black
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: 0,
|
||||
},
|
||||
)
|
||||
|
||||
const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
|
||||
const scale = (length1 - length2) / coord.x
|
||||
|
||||
tmpPolygon.set({ scaleX: scale })
|
||||
|
||||
pointsArray[0].x = 0
|
||||
pointsArray[0].y = length3 //바닥면부터 시작하게
|
||||
pointsArray[1].x = pointsArray[0].x + length1
|
||||
pointsArray[1].y = pointsArray[0].y
|
||||
pointsArray[2].x = pointsArray[1].x
|
||||
pointsArray[2].y = pointsArray[1].y - length4
|
||||
pointsArray[3].x = pointsArray[2].x - length2
|
||||
pointsArray[3].y = pointsArray[2].y
|
||||
pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
|
||||
pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
|
||||
|
||||
const tmp1Polygon = new QPolygon(pointsArray, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black', //black
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: 0,
|
||||
})
|
||||
|
||||
// canvas?.add(tmp1Polygon)
|
||||
|
||||
let isDrawing = true
|
||||
canvas?.on('mouse:move', (e) => {
|
||||
if (!isDrawing) {
|
||||
return
|
||||
}
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
const triangle = new QPolygon(
|
||||
[
|
||||
{
|
||||
x: pointer.x - length1 / 2,
|
||||
y: pointer.y + length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x + length1 / 2,
|
||||
y: pointer.y + length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x + length1 / 2,
|
||||
y: pointer.y - length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x - (length2 - length1 / 2),
|
||||
y: pointer.y - length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x - length1 / 2 + pointsArray[4].x,
|
||||
y: pointer.y - length3 + length4 / 2,
|
||||
},
|
||||
],
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
)
|
||||
canvas?.add(triangle)
|
||||
})
|
||||
|
||||
canvas?.on('mouse:down', (e) => {
|
||||
isDrawing = false
|
||||
})
|
||||
}
|
||||
|
||||
const createTemplate22 = () => {
|
||||
const length1 = 500 //Number(prompt('1번'))
|
||||
const length2 = 240 //Number(prompt('2번'))
|
||||
const length3 = 300 //Number(prompt('3번'))
|
||||
const length4 = 200 //Number(prompt('4번'))
|
||||
|
||||
if (length1 < length2) {
|
||||
alert('1번보다 작게 입력해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
if (length3 < length4) {
|
||||
alert('3번보다 작게 입력해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
const pointsArray = [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
]
|
||||
|
||||
const tmpPolygon = new QPolygon(
|
||||
[
|
||||
{ x: 0, y: length3 },
|
||||
{ x: length1 - length2, y: length3 },
|
||||
{ x: (length1 - length2) / 2, y: length3 - length3 },
|
||||
],
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black', //black
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: 0,
|
||||
},
|
||||
)
|
||||
|
||||
const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
|
||||
const scale = (length1 - length2) / coord.x
|
||||
|
||||
tmpPolygon.set({ scaleX: scale })
|
||||
|
||||
pointsArray[0].x = 0
|
||||
pointsArray[0].y = length3 //바닥면부터 시작하게
|
||||
pointsArray[1].x = pointsArray[0].x + length1
|
||||
pointsArray[1].y = pointsArray[0].y
|
||||
pointsArray[2].x = pointsArray[1].x
|
||||
pointsArray[2].y = pointsArray[1].y - length4
|
||||
pointsArray[3].x = pointsArray[2].x - length2
|
||||
pointsArray[3].y = pointsArray[2].y
|
||||
pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
|
||||
pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
|
||||
|
||||
const tmp1Polygon = new QPolygon(pointsArray, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black', //black
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: 0,
|
||||
})
|
||||
|
||||
tmp1Polygon.set('flipX', true) //반전시킴
|
||||
tmp1Polygon.setCoords()
|
||||
|
||||
let isDrawing = true
|
||||
canvas?.on('mouse:move', (e) => {
|
||||
if (!isDrawing) {
|
||||
return
|
||||
}
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
const triangle = new QPolygon(
|
||||
[
|
||||
{
|
||||
x: pointer.x - length1 / 2,
|
||||
y: pointer.y + length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x + length1 / 2,
|
||||
y: pointer.y + length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x + length1 / 2,
|
||||
y: pointer.y - length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x - (length2 - length1 / 2),
|
||||
y: pointer.y - length4 / 2,
|
||||
},
|
||||
{
|
||||
x: pointer.x - length1 / 2 + pointsArray[4].x,
|
||||
y: pointer.y - length3 + length4 / 2,
|
||||
},
|
||||
],
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
flipX: true,
|
||||
},
|
||||
)
|
||||
triangle.setCoords()
|
||||
canvas?.add(triangle)
|
||||
})
|
||||
|
||||
canvas?.on('mouse:down', (e) => {
|
||||
isDrawing = false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 19~22번은 못함
|
||||
*/
|
||||
@ -1501,14 +1729,6 @@ export default function Roof2(props) {
|
||||
{canvas && (
|
||||
<>
|
||||
<div className=" my-8 w-full text:pretty">
|
||||
<Button
|
||||
className="m-1 p-2"
|
||||
onClick={() => {
|
||||
svgLoad()
|
||||
}}
|
||||
>
|
||||
svg로딩
|
||||
</Button>
|
||||
<Button
|
||||
className="m-1 p-2"
|
||||
onClick={() => {
|
||||
@ -1708,6 +1928,12 @@ export default function Roof2(props) {
|
||||
<Button className="m-1 p-2" onClick={createTemplate20}>
|
||||
20번 추가
|
||||
</Button>
|
||||
<Button className="m-1 p-2" onClick={createTemplate21}>
|
||||
21번 추가
|
||||
</Button>
|
||||
<Button className="m-1 p-2" onClick={createTemplate22}>
|
||||
22번 추가
|
||||
</Button>
|
||||
<Button className="m-1 p-2" onClick={createTemplate23}>
|
||||
23번 추가
|
||||
</Button>
|
||||
|
||||
@ -705,3 +705,23 @@ export const getClosestVerticalLine = (pointer, verticalLineArray) => {
|
||||
|
||||
return closestLine
|
||||
}
|
||||
|
||||
/**
|
||||
* 빗변과 높이를 가지고 빗변의 x값을 구함
|
||||
* @param {} p1
|
||||
* @param {*} p2
|
||||
* @param {*} y
|
||||
* @returns
|
||||
*/
|
||||
export const getIntersectionPoint = (p1, p2, y) => {
|
||||
const { x: x1, y: y1 } = p1
|
||||
const { x: x2, y: y2 } = p2
|
||||
|
||||
// 기울기와 y 절편을 이용해 선의 방정식을 구합니다.
|
||||
const slope = (y2 - y1) / (x2 - x1)
|
||||
const intercept = y1 - slope * x1
|
||||
|
||||
// y = 150일 때의 x 좌표를 구합니다.
|
||||
const x = (y - intercept) / slope
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user