면형상 => 모듈 회로구성 => 모듈 채우기 작업중
This commit is contained in:
parent
cb0775c493
commit
1647bc58a0
@ -535,44 +535,6 @@ export default function Roof2(props) {
|
||||
})
|
||||
}
|
||||
|
||||
const setCurrentPattern = (polygon) => {
|
||||
const { width, height, roofStyle } = roofMaterial
|
||||
const roofRatio = window.devicePixelRatio || 1
|
||||
const patternSourceCanvas = document.createElement('canvas')
|
||||
|
||||
if (roofStyle === 1) {
|
||||
patternSourceCanvas.width = width * roofRatio
|
||||
patternSourceCanvas.height = height * roofRatio
|
||||
} else if (roofStyle === 2) {
|
||||
patternSourceCanvas.width = width * 2
|
||||
patternSourceCanvas.height = height * 2
|
||||
}
|
||||
|
||||
const ctx = patternSourceCanvas.getContext('2d')
|
||||
|
||||
ctx.scale(roofRatio, roofRatio)
|
||||
ctx.strokeStyle = 'green'
|
||||
ctx.lineWidth = 0.4
|
||||
// 벽돌 패턴 그리기
|
||||
if (roofStyle === 1) {
|
||||
ctx.strokeRect(0, 0, 50, 30)
|
||||
} else if (roofStyle === 2) {
|
||||
// 지그재그
|
||||
ctx.strokeRect(0, 0, 200, 100)
|
||||
ctx.strokeRect(100, 100, 200, 100)
|
||||
}
|
||||
|
||||
// 패턴 생성
|
||||
const pattern = new fabric.Pattern({
|
||||
source: patternSourceCanvas,
|
||||
repeat: 'repeat',
|
||||
})
|
||||
polygon.set('fill', null)
|
||||
|
||||
polygon.set('fill', pattern)
|
||||
canvas?.renderAll()
|
||||
}
|
||||
|
||||
/**
|
||||
* canvas 내용 불러오기
|
||||
*/
|
||||
@ -1531,6 +1493,9 @@ export default function Roof2(props) {
|
||||
})
|
||||
}
|
||||
|
||||
const moduleConfiguration = () => {
|
||||
createRoofRack()
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{canvas && (
|
||||
@ -1764,8 +1729,11 @@ export default function Roof2(props) {
|
||||
<Button className="m-1 p-2" onClick={createTemplate29}>
|
||||
29번 추가
|
||||
</Button>
|
||||
<Button className="m-1 p-2" onClick={createPentagon2}>
|
||||
오각형 추가2
|
||||
<Button className="m-1 p-2" onClick={moduleConfiguration}>
|
||||
모듈,회로구성
|
||||
</Button>
|
||||
<Button className="m-1 p-2" onClick={drawCellInTrestle}>
|
||||
모듈 채우기
|
||||
</Button>
|
||||
<Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
|
||||
canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Button, Input } from '@nextui-org/react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||
import { fontSizeState } from '@/store/canvasAtom'
|
||||
import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
|
||||
|
||||
/**
|
||||
* 면형상 배치 모달
|
||||
@ -14,6 +14,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
const [type, setType] = useState(0)
|
||||
const setOpen = useSetRecoilState(modalState)
|
||||
const fontSize = useRecoilValue(fontSizeState)
|
||||
//지붕재
|
||||
const roofMaterial = useRecoilValue(roofMaterialState)
|
||||
|
||||
/**
|
||||
* 최대 5개의 length
|
||||
@ -42,21 +44,27 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
if (!isDrawing) {
|
||||
return
|
||||
}
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
switch (type) {
|
||||
case 1: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
let newLength2 = length2
|
||||
|
||||
if (length3 !== 0) {
|
||||
newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
|
||||
}
|
||||
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x, y: pointer.y - parseInt(length2) / 2 },
|
||||
{ x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(length1) / 2 },
|
||||
{ x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(length1) / 2 },
|
||||
{ x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
|
||||
{ x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
||||
{ x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
|
||||
],
|
||||
{
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -65,8 +73,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -78,7 +84,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -86,8 +92,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -99,7 +103,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -107,8 +111,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -119,7 +121,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -128,8 +130,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
break
|
||||
}
|
||||
case 5: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -140,7 +140,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -149,8 +149,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
|
||||
case 6: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
|
||||
@ -162,7 +160,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -171,8 +169,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
|
||||
case 7: {
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
|
||||
@ -184,7 +180,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -192,8 +188,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
case 8: {
|
||||
const angleInRadians = Math.asin(length2 / length3)
|
||||
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -205,7 +199,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -213,7 +207,6 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
case 9: {
|
||||
const angleInRadians = Math.asin(length2 / length3)
|
||||
const pointer = canvas?.getPointer(e.e)
|
||||
obj = new QPolygon(
|
||||
[
|
||||
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
|
||||
@ -225,7 +218,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
selectable: false,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
},
|
||||
@ -233,6 +226,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
}
|
||||
canvas?.add(obj)
|
||||
setCurrentPattern(obj)
|
||||
canvas?.renderAll()
|
||||
})
|
||||
|
||||
canvas?.on('mouse:down', (e) => {
|
||||
@ -265,6 +260,44 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const setCurrentPattern = (polygon) => {
|
||||
const { width, height, roofStyle } = roofMaterial
|
||||
const roofRatio = window.devicePixelRatio || 1
|
||||
const patternSourceCanvas = document.createElement('canvas')
|
||||
|
||||
if (roofStyle === 1) {
|
||||
patternSourceCanvas.width = width * roofRatio
|
||||
patternSourceCanvas.height = height * roofRatio
|
||||
} else if (roofStyle === 2) {
|
||||
patternSourceCanvas.width = width * 2
|
||||
patternSourceCanvas.height = height * 2
|
||||
}
|
||||
|
||||
const ctx = patternSourceCanvas.getContext('2d')
|
||||
|
||||
ctx.scale(roofRatio, roofRatio)
|
||||
ctx.strokeStyle = 'green'
|
||||
ctx.lineWidth = 0.4
|
||||
// 벽돌 패턴 그리기
|
||||
if (roofStyle === 1) {
|
||||
ctx.strokeRect(0, 0, 50, 30)
|
||||
} else if (roofStyle === 2) {
|
||||
// 지그재그
|
||||
ctx.strokeRect(0, 0, 200, 100)
|
||||
ctx.strokeRect(100, 100, 200, 100)
|
||||
}
|
||||
|
||||
// 패턴 생성
|
||||
const pattern = new fabric.Pattern({
|
||||
source: patternSourceCanvas,
|
||||
repeat: 'repeat',
|
||||
})
|
||||
polygon.set('fill', null)
|
||||
|
||||
polygon.set('fill', pattern)
|
||||
canvas?.renderAll()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
@ -301,8 +334,12 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
<div>
|
||||
길이1
|
||||
<Input type="number" name={'length1'} value={length1} onChange={setLength} />
|
||||
길이2
|
||||
<Input type="number" name={'length2'} value={length2} onChange={setLength} />
|
||||
{length3 === 0 && (
|
||||
<>
|
||||
길이2
|
||||
<Input type="number" name={'length2'} value={length2} onChange={setLength} />
|
||||
</>
|
||||
)}
|
||||
길이3 <Input type="number" name={'length3'} value={length3} onChange={setLength} />
|
||||
</div>
|
||||
) : type === 2 ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user