cut.js
2.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
export default function cut () {
const self = this
const boundWidth = self.width // 裁剪框默认宽度，即整个画布宽度
const boundHeight = self.height
// 裁剪框默认高度，即整个画布高度
let { x = 0, y = 0, width = boundWidth, height = boundHeight } = self.cut
/**
* 设置边界
* @param imgLeft 图片左上角横坐标值
* @param imgTop 图片左上角纵坐标值
*/
self.outsideBound = (imgLeft, imgTop) => {
self.imgLeft = imgLeft >= x
? x
: self.scaleWidth + imgLeft - x <= width
? x + width - self.scaleWidth
: imgLeft
self.imgTop = imgTop >= y
? y
: self.scaleHeight + imgTop - y <= height
? y + height - self.scaleHeight
: imgTop
}
/**
* 设置边界样式
* @param color 边界颜色
*/
self.setBoundStyle = ({ color = '#04b00f', mask = 'rgba(0, 0, 0, 0.3)', lineWidth = 1 } = {}) => {
const boundOption = [
{
start: { x: x - lineWidth, y: y + 10 - lineWidth },
step1: { x: x - lineWidth, y: y - lineWidth },
step2: { x: x + 10 - lineWidth, y: y - lineWidth }
},
{
start: { x: x - lineWidth, y: y + height - 10 + lineWidth },
step1: { x: x - lineWidth, y: y + height + lineWidth },
step2: { x: x + 10 - lineWidth, y: y + height + lineWidth }
},
{
start: { x: x + width - 10 + lineWidth, y: y - lineWidth },
step1: { x: x + width + lineWidth, y: y - lineWidth },
step2: { x: x + width + lineWidth, y: y + 10 - lineWidth }
},
{
start: { x: x + width + lineWidth, y: y + height - 10 + lineWidth },
step1: { x: x + width + lineWidth, y: y + height + lineWidth },
step2: { x: x + width - 10 + lineWidth, y: y + height + lineWidth }
}
]
// 绘制半透明层
self.ctx.beginPath()
self.ctx.setFillStyle(mask)
self.ctx.fillRect(0, 0, x, boundHeight)
self.ctx.fillRect(x, 0, width, y)
self.ctx.fillRect(x, y + height, width, boundHeight - y - height)
self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight)
self.ctx.fill()
boundOption.forEach(op => {
self.ctx.beginPath()
self.ctx.setStrokeStyle(color)
self.ctx.setLineWidth(lineWidth)
self.ctx.moveTo(op.start.x, op.start.y)
self.ctx.lineTo(op.step1.x, op.step1.y)
self.ctx.lineTo(op.step2.x, op.step2.y)
self.ctx.stroke()
})
}
}