qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/test' into feature/test-jy

Browse Source 
# Conflicts:
#	src/components/fabric/QPolygon.js
This commit is contained in:
Jaeyoung Lee 2024-07-31 09:55:59 +09:00
commit b3d8928941
2 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/fabric/QPolygon.js
View File

@ -76,13 +76,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.shape = shape
},
toObject: function(propertiesToInclude) {
toObject: function (propertiesToInclude) {
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
type: this.type,
text: this.text,
})
},
init: function() {
init: function () {
this.addLengthText()
this.on('moving', () => {
@ -138,19 +138,20 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
points.forEach((start, i) => {
const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i)
if (thisText) {
thisText.set({
left: (start.x + points[(i + 1) % points.length].x) / 2,
top: (start.y + points[(i + 1) % points.length].y) / 2,
})
return
}
const end = points[(i + 1) % points.length]
const dx = end.x - start.x
const dy = end.y - start.y
const length = Math.sqrt(dx * dx + dy * dy)
if (thisText) {
thisText.set({
left: (start.x + points[(i + 1) % points.length].x) / 2,
top: (start.y + points[(i + 1) % points.length].y) / 2,
text: length.toFixed(0),
})
return
}
const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
// Create new text object if it doesn't exist
@ -173,48 +174,56 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.fontSize = fontSize
this.text.set({ fontSize })
},
_render: function(ctx) {
_render: function (ctx) {
this.callSuper('_render', ctx)
},
_set: function(key, value) {
_set: function (key, value) {
this.callSuper('_set', key, value)
},
setCanvas(canvas) {
this.canvas = canvas
},
fillCell(cell = { width: 50, height: 100, padding: 10 }) {
const points = this.getCurrentPoints()
let bounds
const points = this.points
const minX = Math.min(...points.map((p) => p.x))
const maxX = Math.max(...points.map((p) => p.x))
const minY = Math.min(...points.map((p) => p.y))
const maxY = Math.max(...points.map((p) => p.y))
try {
bounds = fabric.util.makeBoundingBoxFromPoints(points)
} catch (error) {
alert('다각형의 꼭지점이 4개 이상이어야 합니다.')
return
}
const boundingBoxWidth = maxX - minX
const boundingBoxHeight = maxY - minY
for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) {
for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) {
const rect = new fabric.Rect({
left: x,
top: y,
width: cell.width,
height: cell.height,
fill: 'transparent',
stroke: 'black',
selectable: false,
})
const rectWidth = cell.width
const rectHeight = cell.height
const cols = Math.floor((boundingBoxWidth + cell.padding) / (rectWidth + cell.padding))
const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const rectLeft = minX + i * (rectWidth + cell.padding)
const rectTop = minY + j * (rectHeight + cell.padding)
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),
{ x: rectLeft, y: rectTop },
{ x: rectLeft + rectWidth, y: rectTop },
{ x: rectLeft, y: rectTop + rectHeight },
{ x: rectLeft + rectWidth, y: rectTop + rectHeight },
]
const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.distanceFromEdge(rectPoint) >= cell.padding)
const allPointsInside = rectPoints.every((point) => this.inPolygon(point))
if (allPointsInside) {
const rect = new fabric.Rect({
left: rectLeft,
top: rectTop,
width: rectWidth,
height: rectHeight,
stroke: 'black', // or any other color
fill: 'transparent',
selectable: false,
})
if (isInside) {
this.canvas.add(rect)
}
}
@ -303,7 +312,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
}
})
},
setWall: function(wall) {
setWall: function (wall) {
this.wall = wall
},
setViewLengthText(isView) {
@ -311,4 +320,4 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
text.set({ visible: isView })
})
},
})
})

33
src/util/canvas-util.js
View File

@ -391,20 +391,39 @@ export const sortedPoints = (points) => {
point.y2 = nextPoint.y
})
// copyPoint에서 x1, y1 값을 기준으로 정렬 후 첫번째 값
// copyPoint에서 x1, y1 값을 기준으로 시작 인덱스
const startIndex = getStartIndex(copyPoints)
const startDirection = getDirectionByPoint(
{ x: copyPoints[startIndex].x1, y: copyPoints[startIndex].y1 },
{ x: copyPoints[startIndex].x2, y: copyPoints[startIndex].y2 },
)
const resultPoints = [copyPoints[startIndex]]
let currentPoint = copyPoints[startIndex]
copyPoints.forEach((point, index) => {
if (index === startIndex) return
switch (startDirection) {
case 'right': {
copyPoints.forEach((point, index) => {
if (index === startIndex) return
const nextPoint = copyPoints.find((p) => p.x1 === currentPoint.x2 && p.y1 === currentPoint.y2)
resultPoints.push(nextPoint)
currentPoint = nextPoint
})
const nextPoint = copyPoints.find((p) => p.x2 === currentPoint.x && p.y2 === currentPoint.y)
resultPoints.push(nextPoint)
currentPoint = nextPoint
})
break
}
case 'bottom': {
copyPoints.forEach((point, index) => {
if (index === startIndex) return
const nextPoint = copyPoints.find((p) => p.x1 === currentPoint.x2 && p.y1 === currentPoint.y2)
resultPoints.push(nextPoint)
currentPoint = nextPoint
})
break
}
}
return resultPoints.map((point) => {
return { x: point.x, y: point.y }