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

거리재기 기능 수정

Browse Source
This commit is contained in:
yjnoh 2024-10-24 13:46:55 +09:00
parent 0845259945
commit 7aa2e6194d
1 changed files with 67 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/hooks/common/useCommonUtils.js
View File

@ -29,8 +29,6 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
const commonTextMode = () => {
let textbox
if (commonFunctionState.text) {
console.log(commonTextFont)
addCanvasMouseEventListener('mouse:down', (event) => {
const pointer = canvas?.getPointer(event.e)
textbox = new fabric.Textbox('', {
@ -280,50 +278,70 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
addCanvasMouseEventListener('mouse:down', function (options) {
const pointer = canvas.getPointer(options.e)
let point
let cross = {}
if (points.length === 0) {
// 첫 번째 포인트는 그대로 클릭한 위치에 추가
point = new fabric.Circle({
left: pointer.x - 5, // 반지름 반영
top: pointer.y - 5, // 반지름 반영
...circleOptions,
point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], {
stroke: 'black',
strokeWidth: 1,
originX: 'center',
originY: 'center',
})
points.push(point)
canvas.add(point)
cross['x'] = parseInt(point.left.toFixed(0))
// 세로 선 생성 (십자 모양의 다른 축)
point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], {
stroke: 'black',
strokeWidth: 1,
originX: 'center',
originY: 'center',
})
cross['y'] = parseInt(point.top.toFixed(0))
canvas.add(point)
points.push(cross)
} else if (points.length === 1) {
// 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
const p1 = points[0]
point = new fabric.Circle({
left: pointer.x - 5, // 반지름 반영
top: pointer.y - 5, // 반지름 반영
...circleOptions,
point = new fabric.Line([pointer.x - 10, pointer.y, pointer.x + 10, pointer.y], {
stroke: 'black',
strokeWidth: 1,
originX: 'center',
originY: 'center',
})
points.push(point)
canvas.add(point)
cross['x'] = parseInt(point.left.toFixed(0))
// 세로 선 생성 (십자 모양의 다른 축)
point = new fabric.Line([pointer.x, pointer.y - 10, pointer.x, pointer.y + 10], {
stroke: 'black',
strokeWidth: 1,
originX: 'center',
originY: 'center',
})
canvas.add(point)
cross['y'] = parseInt(point.top.toFixed(0))
points.push(cross)
let isParallel = false
if (points[0].x === points[1].x || points[0].y === points[1].y) {
isParallel = true
}
// 두 포인트의 중심 좌표 계산
const p2 = points[1]
const p1CenterX = p1.left + p1.radius
const p1CenterY = p1.top + p1.radius
const p2CenterX = p2.left + p2.radius
const p2CenterY = p2.top + p2.radius
const p3 = new fabric.Point(p2CenterX, p1CenterY)
const p1CenterX = p1.x
const p1CenterY = p1.y
const p2CenterX = p2.x
const p2CenterY = p2.y
// 두 포인트 간에 직선을 그림 (중심을 기준으로)
const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], lineOptions)
const line2 = new fabric.Line([p2CenterX, p2CenterY, p3.x, p3.y], lineOptions)
const line3 = new fabric.Line([p3.x, p3.y, p1CenterX, p1CenterY], lineOptions)
canvas.add(line)
canvas.add(line2)
canvas.add(line3)
const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
// 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
distanceText = new fabric.Text(`${distance1 * 10}`, {
@ -332,18 +350,28 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
...textOptions,
})
canvas.add(distanceText)
distanceText = new fabric.Text(`${distance2 * 10}`, {
left: (p2CenterX + p3.x) / 2,
top: (p2CenterY + p3.y) / 2,
...textOptions,
})
canvas.add(distanceText)
distanceText = new fabric.Text(`${distance3 * 10}`, {
left: (p3.x + p1CenterX) / 2,
top: (p3.y + p1CenterY) / 2,
...textOptions,
})
canvas.add(distanceText)
if (!isParallel) {
const p3 = new fabric.Point(p2CenterX, p1CenterY)
const line2 = new fabric.Line([p2CenterX, p2CenterY, p3.x, p3.y], lineOptions)
const line3 = new fabric.Line([p3.x, p3.y, p1CenterX, p1CenterY], lineOptions)
canvas.add(line2)
canvas.add(line3)
const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
distanceText = new fabric.Text(`${distance2 * 10}`, {
left: (p2CenterX + p3.x) / 2,
top: (p2CenterY + p3.y) / 2,
...textOptions,
})
canvas.add(distanceText)
distanceText = new fabric.Text(`${distance3 * 10}`, {
left: (p3.x + p1CenterX) / 2,
top: (p3.y + p1CenterY) / 2,
...textOptions,
})
canvas.add(distanceText)
}
// 거리 계산 후, 다음 측정을 위해 초기화
points = []