117 lines
2.9 KiB
JavaScript
117 lines
2.9 KiB
JavaScript
import { fabric } from 'fabric'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { getDirection } from '@/util/canvas-util'
|
|
|
|
export const QLine = fabric.util.createClass(fabric.Line, {
|
|
type: 'QLine',
|
|
text: null,
|
|
id: null,
|
|
line: null,
|
|
length: 0,
|
|
direction: null,
|
|
idx: 0,
|
|
initialize: function (points, options, canvas) {
|
|
this.callSuper('initialize', points, options)
|
|
if (options.id) {
|
|
this.id = options.id
|
|
} else {
|
|
this.id = uuidv4()
|
|
}
|
|
this.line = this
|
|
// 소수점 전부 제거
|
|
points.forEach((point) => {
|
|
point = Math.round(point)
|
|
})
|
|
|
|
const scaleX = this.scaleX
|
|
const scaleY = this.scaleY
|
|
const x1 = this.left
|
|
const y1 = this.top
|
|
const x2 = this.left + this.width * scaleX
|
|
const y2 = this.top + this.height * scaleY
|
|
this.idx = options.idx ?? 0
|
|
const dx = x2 - x1
|
|
const dy = y2 - y1
|
|
this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
|
|
|
|
this.direction = options.direction ?? getDirection({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
|
|
|
|
if (canvas) {
|
|
this.canvas = canvas
|
|
}
|
|
},
|
|
|
|
toObject: function (propertiesToInclude) {
|
|
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
|
type: this.type,
|
|
text: this.text,
|
|
})
|
|
},
|
|
init: function () {
|
|
this.addLengthText()
|
|
|
|
this.on('moving', () => {
|
|
this.addLengthText()
|
|
})
|
|
|
|
this.on('modified', (e) => {
|
|
this.addLengthText()
|
|
})
|
|
|
|
this.on('removed', () => {
|
|
const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
|
|
if (thisText) {
|
|
this.canvas.remove(thisText)
|
|
}
|
|
this.text = null
|
|
})
|
|
},
|
|
|
|
addLengthText() {
|
|
const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
|
|
|
|
const scaleX = this.scaleX
|
|
const scaleY = this.scaleY
|
|
const x1 = this.left
|
|
const y1 = this.top
|
|
const x2 = this.left + this.width * scaleX
|
|
const y2 = this.top + this.height * scaleY
|
|
|
|
if (thisText) {
|
|
thisText.set({ text: this.length.toFixed(0).toString(), left: (x1 + x2) / 2, top: (y1 + y2) / 2 })
|
|
return
|
|
}
|
|
|
|
const dx = x2 - x1
|
|
const dy = y2 - y1
|
|
this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
|
|
|
|
const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
|
|
left: (x1 + x2) / 2,
|
|
top: (y1 + y2) / 2,
|
|
fontSize: this.fontSize,
|
|
selectable: false,
|
|
parentId: this.id,
|
|
name: 'lengthText',
|
|
})
|
|
|
|
this.text = text
|
|
this.canvas.add(text)
|
|
},
|
|
setFontSize(fontSize) {
|
|
this.fontSize = fontSize
|
|
this.text.set({ fontSize })
|
|
},
|
|
_render: function (ctx) {
|
|
this.callSuper('_render', ctx)
|
|
this.init()
|
|
},
|
|
_set: function (key, value) {
|
|
this.callSuper('_set', key, value)
|
|
},
|
|
|
|
setCanvas(canvas) {
|
|
this.canvas = canvas
|
|
},
|
|
})
|