|
@@ -201,92 +201,96 @@ export default class PaintShape {
|
|
|
x,
|
|
|
y
|
|
|
}
|
|
|
- if (this.initStartPoint.x !== this.initEndPoint.x && this.initStartPoint.y !== this.initEndPoint.y) {
|
|
|
- if (!this.shapeEle) {
|
|
|
- const shapeEle = createSvg(
|
|
|
- this.checkSvgChild(this.tool),
|
|
|
- {
|
|
|
- 'fill': 'none',
|
|
|
- 'stroke': this.color,
|
|
|
- 'stroke-width': 2 * scale,
|
|
|
- 'stroke-opacity': 0.8
|
|
|
- }
|
|
|
- )
|
|
|
- if (this.tool === 'arrow') {
|
|
|
- let arrowBuild = new ArrowHelper(this.initStartPoint, this.initEndPoint)
|
|
|
- let arrowLength = 12 * scale
|
|
|
- let arrowUi = arrowBuild.getEndArrow(30, arrowLength, false)
|
|
|
- if (arrowUi) {
|
|
|
- this.tail = "OpenArrow"
|
|
|
- arrowUi.setAttribute('tail', '')
|
|
|
- arrowUi.setAttribute("stroke", this.color)
|
|
|
- arrowUi.setAttribute("stroke-width", 2 * scale)
|
|
|
- arrowUi.setAttribute("fill", "none")
|
|
|
- arrowUi.setAttribute("stroke-opacity", 0.8)
|
|
|
- this.svgElement.append(arrowUi)
|
|
|
- }
|
|
|
+ if (this.initStartPoint.x === this.initEndPoint.x) {
|
|
|
+ this.initEndPoint.x = this.initEndPoint.x + 1
|
|
|
+ }
|
|
|
+ if (this.initStartPoint.y === this.initEndPoint.y) {
|
|
|
+ this.initEndPoint.y = this.initEndPoint.y + 1
|
|
|
+ }
|
|
|
+ if (!this.shapeEle) {
|
|
|
+ const shapeEle = createSvg(
|
|
|
+ this.checkSvgChild(this.tool),
|
|
|
+ {
|
|
|
+ 'fill': 'none',
|
|
|
+ 'stroke': this.color,
|
|
|
+ 'stroke-width': 2 * scale,
|
|
|
+ 'stroke-opacity': 0.8
|
|
|
}
|
|
|
- this.shapeEle = shapeEle
|
|
|
- this.svgElement.append(this.shapeEle)
|
|
|
- } else {
|
|
|
- if (event.shiftKey && (this.tool === 'circle' || this.tool === 'square')) {
|
|
|
- const { initStartPoint, initEndPoint } = this
|
|
|
- const distanceX = Math.abs(initEndPoint.x - initStartPoint.x)
|
|
|
- const distanceY = Math.abs(initEndPoint.y - initStartPoint.y)
|
|
|
- const distance = Math.min(distanceX, distanceY)
|
|
|
- if (initStartPoint.x < initEndPoint.x) {
|
|
|
- initEndPoint.x = initStartPoint.x + distance
|
|
|
- } else {
|
|
|
- initEndPoint.x = initStartPoint.x - distance
|
|
|
- }
|
|
|
- if (initStartPoint.y < initEndPoint.y) {
|
|
|
- initEndPoint.y = initStartPoint.y + distance
|
|
|
- } else {
|
|
|
- initEndPoint.y = initStartPoint.y - distance
|
|
|
- }
|
|
|
+ )
|
|
|
+ if (this.tool === 'arrow') {
|
|
|
+ let arrowBuild = new ArrowHelper(this.initStartPoint, this.initEndPoint)
|
|
|
+ let arrowLength = 12 * scale
|
|
|
+ let arrowUi = arrowBuild.getEndArrow(30, arrowLength, false)
|
|
|
+ if (arrowUi) {
|
|
|
+ this.tail = "OpenArrow"
|
|
|
+ arrowUi.setAttribute('tail', '')
|
|
|
+ arrowUi.setAttribute("stroke", this.color)
|
|
|
+ arrowUi.setAttribute("stroke-width", 2 * scale)
|
|
|
+ arrowUi.setAttribute("fill", "none")
|
|
|
+ arrowUi.setAttribute("stroke-opacity", 0.8)
|
|
|
+ this.svgElement.append(arrowUi)
|
|
|
}
|
|
|
- const rect = this.calculate(this.initStartPoint, this.initEndPoint)
|
|
|
-
|
|
|
- const shapeEle = this.shapeEle
|
|
|
- if (this.tool === 'circle') {
|
|
|
- shapeEle.setAttribute('cx', rect.left + rect.width / 2,)
|
|
|
- shapeEle.setAttribute('cy', rect.top + rect.height / 2,)
|
|
|
- shapeEle.setAttribute('rx', (rect.width - 1) / 2,)
|
|
|
- shapeEle.setAttribute('ry', (rect.height - 1) / 2,)
|
|
|
- } else if (this.tool === 'square') {
|
|
|
- shapeEle.setAttribute('x', rect.left + 1 / 2,)
|
|
|
- shapeEle.setAttribute('y', rect.top - 1 / 2,)
|
|
|
- shapeEle.setAttribute('width', `${Math.abs(rect.width - 1)}px`,)
|
|
|
- shapeEle.setAttribute('height', `${Math.abs(rect.height - 1)}px`,)
|
|
|
- } else if (this.tool === 'line' || this.tool === 'arrow') {
|
|
|
- shapeEle.setAttribute('x1', this.initStartPoint.x);
|
|
|
- shapeEle.setAttribute('y1', this.initStartPoint.y);
|
|
|
- shapeEle.setAttribute('x2', this.initEndPoint.x);
|
|
|
- shapeEle.setAttribute('y2', this.initEndPoint.y);
|
|
|
-
|
|
|
- if (this.tool === 'arrow') {
|
|
|
- let tail = this.svgElement.querySelector('[tail]')
|
|
|
- if (tail) {
|
|
|
- let arrowBuild = new ArrowHelper(this.initStartPoint, this.initEndPoint)
|
|
|
- let arrowLength = 12 * scale
|
|
|
- let arrowPoints = arrowBuild.getEndArrowPoints(30, arrowLength)
|
|
|
- let points = ''
|
|
|
- arrowPoints.forEach(element => {
|
|
|
- if (points.length > 0) {
|
|
|
- points = points + ' '
|
|
|
- }
|
|
|
- points = points + `${element.x},${element.y}`
|
|
|
- });
|
|
|
+ }
|
|
|
+ this.shapeEle = shapeEle
|
|
|
+ this.svgElement.append(this.shapeEle)
|
|
|
+ } else {
|
|
|
+ if (event.shiftKey && (this.tool === 'circle' || this.tool === 'square')) {
|
|
|
+ const { initStartPoint, initEndPoint } = this
|
|
|
+ const distanceX = Math.abs(initEndPoint.x - initStartPoint.x)
|
|
|
+ const distanceY = Math.abs(initEndPoint.y - initStartPoint.y)
|
|
|
+ const distance = Math.min(distanceX, distanceY)
|
|
|
+ if (initStartPoint.x < initEndPoint.x) {
|
|
|
+ initEndPoint.x = initStartPoint.x + distance
|
|
|
+ } else {
|
|
|
+ initEndPoint.x = initStartPoint.x - distance
|
|
|
+ }
|
|
|
+ if (initStartPoint.y < initEndPoint.y) {
|
|
|
+ initEndPoint.y = initStartPoint.y + distance
|
|
|
+ } else {
|
|
|
+ initEndPoint.y = initStartPoint.y - distance
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const rect = this.calculate(this.initStartPoint, this.initEndPoint)
|
|
|
+
|
|
|
+ const shapeEle = this.shapeEle
|
|
|
+ if (this.tool === 'circle') {
|
|
|
+ shapeEle.setAttribute('cx', rect.left + rect.width / 2,)
|
|
|
+ shapeEle.setAttribute('cy', rect.top + rect.height / 2,)
|
|
|
+ shapeEle.setAttribute('rx', (rect.width - 1) / 2,)
|
|
|
+ shapeEle.setAttribute('ry', (rect.height - 1) / 2,)
|
|
|
+ } else if (this.tool === 'square') {
|
|
|
+ shapeEle.setAttribute('x', rect.left + 1 / 2,)
|
|
|
+ shapeEle.setAttribute('y', rect.top - 1 / 2,)
|
|
|
+ shapeEle.setAttribute('width', `${Math.abs(rect.width - 1)}px`,)
|
|
|
+ shapeEle.setAttribute('height', `${Math.abs(rect.height - 1)}px`,)
|
|
|
+ } else if (this.tool === 'line' || this.tool === 'arrow') {
|
|
|
+ shapeEle.setAttribute('x1', this.initStartPoint.x);
|
|
|
+ shapeEle.setAttribute('y1', this.initStartPoint.y);
|
|
|
+ shapeEle.setAttribute('x2', this.initEndPoint.x);
|
|
|
+ shapeEle.setAttribute('y2', this.initEndPoint.y);
|
|
|
+
|
|
|
+ if (this.tool === 'arrow') {
|
|
|
+ let tail = this.svgElement.querySelector('[tail]')
|
|
|
+ if (tail) {
|
|
|
+ let arrowBuild = new ArrowHelper(this.initStartPoint, this.initEndPoint)
|
|
|
+ let arrowLength = 12 * scale
|
|
|
+ let arrowPoints = arrowBuild.getEndArrowPoints(30, arrowLength)
|
|
|
+ let points = ''
|
|
|
+ arrowPoints.forEach(element => {
|
|
|
if (points.length > 0) {
|
|
|
- tail.setAttribute('points', points)
|
|
|
+ points = points + ' '
|
|
|
}
|
|
|
+ points = points + `${element.x},${element.y}`
|
|
|
+ });
|
|
|
+ if (points.length > 0) {
|
|
|
+ tail.setAttribute('points', points)
|
|
|
}
|
|
|
}
|
|
|
- } else if (this.tool === 'ink') {
|
|
|
- this.path.push([x, y])
|
|
|
- const d = this.getFreeDrawSvgPath()
|
|
|
- shapeEle.setAttribute('d', d)
|
|
|
}
|
|
|
+ } else if (this.tool === 'ink') {
|
|
|
+ this.path.push([x, y])
|
|
|
+ const d = this.getFreeDrawSvgPath()
|
|
|
+ shapeEle.setAttribute('d', d)
|
|
|
}
|
|
|
}
|
|
|
}
|