# 文本省略
# 单行文本 ellipsis 效果
# show code
// 文本没有找到框,自定义Text,加上框
export const FabricText = fabric.util.createClass(fabric.Text, {
type: 'border-text', // 添加一个 type 属性
// 初始化
initialize(text, options) {
this.callSuper('initialize', text, options) // 继承
return this
},
_render(ctx) {
fabric.Textbox.prototype._render.call(this, ctx)
if (this.active) return
const padding = this.padding || 2
if (this.showTextBoxBorder) {
const w = this.width + 2 * padding
const h = this.height + 2 * padding
const x = -this.width / 2 - padding
const y = -this.height / 2 - padding
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x + w, y)
ctx.lineTo(x + w, y + h)
ctx.lineTo(x, y + h)
ctx.lineTo(x, y)
ctx.closePath()
const stroke = ctx.strokeStyle
ctx.strokeStyle = this.textboxBorderColor
ctx.stroke()
ctx.strokeStyle = stroke
}
},
})
const draw = (canvas) => {
const fullText = '鼠标移上去看看,我是很长很长的文本,我省略了很多字'
const text = new fabric.Text(`${fullText.substring(0, 6)}...`, {
left: 50,
top: 50,
fontSize: 14,
fill: '#f00',
fullText,
shouldTitleSuspend: 1,
})
canvas.add(text)
}
// 这里是自定义的 Text
const nameTip = new FabricText('', {
fill: '#333',
fontSize: 14,
backgroundColor: '#fff',
padding: 2,
showTextBoxBorder: true,
textboxBorderColor: '#333',
left: -9999,
top: -9999,
})
canvas.add(nameTip)
// 当鼠标移上去的时候
canvas.on('mouse:over', (opt) => {
const { target, e } = opt
if (target && target.shouldTitleSuspend === 1) {
const p = canvas.getPointer(e)
nameTip.set({
left: p.x,
top: p.y + 20,
text: target.fullText,
})
nameTip.bringToFront()
canvas.renderAll()
}
})
canvas.on('mouse:out', () => {
nameTip.set({ left: -9999, top: -9999 })
canvas.renderAll()
})
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
75
76
77
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
75
76
77