변수명 수정
This commit is contained in:
parent
1496ea7224
commit
9a5343eb76
@ -34,7 +34,7 @@ export default function Roof2() {
|
||||
stroke: 'black',
|
||||
width: 400,
|
||||
height: 100,
|
||||
isLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
viewLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
selectable: false,
|
||||
})
|
||||
|
||||
@ -49,7 +49,7 @@ export default function Roof2() {
|
||||
const line = new QLine([50, 50, 200, 200], {
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
isLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
viewLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
selectable: false,
|
||||
})
|
||||
|
||||
@ -72,12 +72,13 @@ export default function Roof2() {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
isLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
viewLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
|
||||
selectable: false,
|
||||
},
|
||||
)
|
||||
|
||||
canvas?.add(polygon)
|
||||
console.log(polygon.polygon)
|
||||
|
||||
setTimeout(() => polygon.delete(), 500)
|
||||
}
|
||||
@ -135,12 +136,6 @@ export default function Roof2() {
|
||||
>
|
||||
clear
|
||||
</button>
|
||||
<button
|
||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||
onClick={() => fillCellInPolygon()}
|
||||
>
|
||||
fillCellInPolygon
|
||||
</button>
|
||||
<button
|
||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||
onClick={zoomIn}
|
||||
|
||||
@ -7,7 +7,7 @@ export default class QLine extends fabric.Line {
|
||||
super(points, option)
|
||||
|
||||
this.on('added', () => {
|
||||
if (this.isLengthText) {
|
||||
if (this.viewLengthText) {
|
||||
this.#addLengthText()
|
||||
} else {
|
||||
this.#makeGroupItem([this])
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { fabric } from 'fabric'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
export default class QPolygon extends fabric.Polygon {
|
||||
group
|
||||
polygon
|
||||
|
||||
constructor(points, option) {
|
||||
super(points, option)
|
||||
|
||||
this.polygon = this
|
||||
this.on('added', () => {
|
||||
if (this.isLengthText) {
|
||||
if (this.viewLengthText) {
|
||||
this.#addLengthText()
|
||||
} else {
|
||||
this.#makeGroupItem([this])
|
||||
@ -54,4 +56,51 @@ export default class QPolygon extends fabric.Polygon {
|
||||
|
||||
this.#makeGroupItem(groupItems)
|
||||
}
|
||||
|
||||
fillCell(cell = { width: 50, height: 100 }) {
|
||||
// QPolygon의 경계를 구합니다.
|
||||
const bounds = this.group.getBoundingRect()
|
||||
|
||||
// 경계 내에서 cell의 크기에 맞게 반복합니다.
|
||||
for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width) {
|
||||
for (
|
||||
let y = bounds.top;
|
||||
y < bounds.top + bounds.height;
|
||||
y += cell.height
|
||||
) {
|
||||
// 각 위치에 cell을 생성합니다.
|
||||
const rect = new QRect({
|
||||
left: x,
|
||||
top: y,
|
||||
viewLengthText: true,
|
||||
width: cell.width,
|
||||
height: cell.height,
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
selectable: false,
|
||||
})
|
||||
|
||||
// 사각형의 각 꼭지점을 생성합니다.
|
||||
const rectPoints = [
|
||||
new fabric.Point(rect.left, rect.top),
|
||||
new fabric.Point(rect.left + rect.width, rect.top),
|
||||
new fabric.Point(rect.left, rect.top + rect.height),
|
||||
new fabric.Point(rect.left + rect.width, rect.top + rect.height),
|
||||
]
|
||||
|
||||
// 모든 꼭지점이 사다리꼴 내부에 있는지 확인합니다.
|
||||
const isInside = rectPoints.every((rectPoint) =>
|
||||
this.group.containsPoint(rectPoint),
|
||||
)
|
||||
|
||||
// 모든 꼭지점이 사다리꼴 내부에 있을 경우에만 사각형을 그립니다.
|
||||
if (isInside) {
|
||||
this.group.canvas.add(rect)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 캔버스를 다시 그립니다.
|
||||
this.group.canvas.renderAll()
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ export default class QRect extends fabric.Rect {
|
||||
super(options)
|
||||
|
||||
this.on('added', () => {
|
||||
if (this.isLengthText) {
|
||||
if (this.viewLengthText) {
|
||||
this.#addLengthText()
|
||||
} else {
|
||||
this.#makeGroupItem([this])
|
||||
@ -36,14 +36,6 @@ export default class QRect extends fabric.Rect {
|
||||
start: { x: this.left, y: this.top },
|
||||
end: { x: this.left + this.width, y: this.top },
|
||||
},
|
||||
{
|
||||
start: { x: this.left + this.width, y: this.top },
|
||||
end: { x: this.left + this.width, y: this.top + this.height },
|
||||
},
|
||||
{
|
||||
start: { x: this.left + this.width, y: this.top + this.height },
|
||||
end: { x: this.left, y: this.top + this.height },
|
||||
},
|
||||
{
|
||||
start: { x: this.left, y: this.top + this.height },
|
||||
end: { x: this.left, y: this.top },
|
||||
|
||||
@ -143,7 +143,7 @@ export function useMode() {
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
isLengthText: true,
|
||||
viewLengthText: true,
|
||||
direction: getDirection(points.current[0], points.current[1]),
|
||||
},
|
||||
)
|
||||
@ -224,7 +224,7 @@ export function useMode() {
|
||||
{
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
isLengthText: true,
|
||||
viewLengthText: true,
|
||||
selectable: false,
|
||||
},
|
||||
)
|
||||
@ -280,7 +280,7 @@ export function useMode() {
|
||||
width: pointer.x - origX,
|
||||
height: pointer.y - origY,
|
||||
angle: 0,
|
||||
isLengthText: true,
|
||||
viewLengthText: true,
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
transparentCorners: false,
|
||||
@ -322,7 +322,7 @@ export function useMode() {
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
isLengthText: true,
|
||||
viewLengthText: true,
|
||||
direction: getDirection(a, b),
|
||||
})
|
||||
historyLines.current.push(line)
|
||||
@ -348,12 +348,14 @@ export function useMode() {
|
||||
const polygon = new QPolygon(points, {
|
||||
stroke: 'black',
|
||||
fill: 'transparent',
|
||||
isLengthText: true,
|
||||
viewLengthText: true,
|
||||
selectable: false,
|
||||
})
|
||||
|
||||
// 새로운 다각형 객체를 캔버스에 추가합니다.
|
||||
canvas.add(polygon)
|
||||
|
||||
polygon.fillCell()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -366,77 +368,8 @@ export function useMode() {
|
||||
historyLines.current = []
|
||||
}
|
||||
|
||||
const fillCellInPolygon = (
|
||||
polygon = null,
|
||||
cell = { width: 50, height: 100 },
|
||||
padding = 20,
|
||||
) => {
|
||||
if (!polygon) {
|
||||
polygon = canvas?.getObjects().find((obj) => obj.type === 'polygon')
|
||||
if (!polygon) {
|
||||
alert('다각형을 먼저 그려주세요')
|
||||
return
|
||||
}
|
||||
}
|
||||
const polygonWidth = polygon.width - 2 * padding
|
||||
const polygonHeight = polygon.height - 2 * padding
|
||||
|
||||
const numRectanglesWidth = Math.floor(polygonWidth / (cell.width + padding))
|
||||
const numRectanglesHeight = Math.floor(
|
||||
polygonHeight / (cell.height + padding),
|
||||
)
|
||||
|
||||
const points = polygon.get('points') // 다각형의 각 꼭지점을 가져옵니다.
|
||||
const lines = []
|
||||
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const start = points[i]
|
||||
const end = points[(i + 1) % points.length] // 다각형이 닫히도록 마지막 점과 첫번째 점을 연결합니다.
|
||||
|
||||
const line = new fabric.Line([start.x, start.y, end.x, end.y], {
|
||||
stroke: 'black',
|
||||
selectable: false,
|
||||
})
|
||||
|
||||
lines.push(line)
|
||||
}
|
||||
|
||||
for (let i = 0; i < numRectanglesWidth; i++) {
|
||||
for (let j = 0; j < numRectanglesHeight; j++) {
|
||||
const rect = new fabric.Rect({
|
||||
left: i * (cell.width + padding) + polygon.left + padding,
|
||||
top: j * (cell.height + padding) + polygon.top + padding,
|
||||
width: cell.width,
|
||||
height: cell.height,
|
||||
fill: 'transparent',
|
||||
stroke: 'red',
|
||||
})
|
||||
|
||||
// 사각형의 각 꼭지점을 생성합니다.
|
||||
const rectPoints = [
|
||||
new fabric.Point(rect.left, rect.top),
|
||||
new fabric.Point(rect.left + rect.width, rect.top),
|
||||
new fabric.Point(rect.left, rect.top + rect.height),
|
||||
new fabric.Point(rect.left + rect.width, rect.top + rect.height),
|
||||
]
|
||||
|
||||
// 모든 꼭지점이 다각형 내부에 있는지 확인합니다.
|
||||
const isInside = rectPoints.every((rectPoint) =>
|
||||
polygon.containsPoint(rectPoint),
|
||||
)
|
||||
|
||||
// 모든 꼭지점이 다각형 내부에 있을 경우에만 사각형을 그립니다.
|
||||
if (isInside) {
|
||||
canvas.add(rect)
|
||||
}
|
||||
}
|
||||
}
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const zoomIn = () => {
|
||||
canvas?.setZoom(canvas.getZoom() + 0.1)
|
||||
|
||||
setZoom(Math.round(zoom + 10))
|
||||
}
|
||||
|
||||
@ -450,7 +383,6 @@ export function useMode() {
|
||||
changeMode,
|
||||
setCanvas,
|
||||
handleClear,
|
||||
fillCellInPolygon,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoom,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user