Skip to content

Commit d843a93

Browse files
stockiNailstockiNail
authored
Enable rotation support to label of box annotation (#690)
1 parent 500f32e commit d843a93

File tree

5 files changed

+146
-2
lines changed

5 files changed

+146
-2
lines changed

‎docs/guide/types/box.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
131131
| `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
132132
| `padding` | [`Padding`](../options#padding) | `6` | The padding to add around the text label.
133133
| [`position`](#position) | `string`\|`{x: string, y: string}` | `'center'` | Anchor position of label in the box.
134+
| `rotation` | `number` | `undefined` | Rotation of label, in degrees. If `undefined`, the box rotation is used.
134135
| `textAlign` | `string` | `'start'` | Text alignment of label content when there's more than one line. Possible options are: `'left'`, `'start'`, `'center'`, `'end'`, `'right'`.
135136
| `textStrokeColor` | [`Color`](../options#color) | `undefined` | The color of the stroke around the text.
136137
| `textStrokeWidth` | `number` | `0` | Stroke width around the text.

‎src/types/box.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default class BoxAnnotation extends Element {
2222

2323
drawLabel(ctx) {
2424
const {x, y, width, height, options} = this;
25-
const {label, borderWidth, rotation} = options;
25+
const {label, borderWidth} = options;
2626
const halfBorder = borderWidth / 2;
2727
const position = toPosition(label.position);
2828
const padding = toPadding(label.padding);
@@ -35,7 +35,7 @@ export default class BoxAnnotation extends Element {
3535
};
3636

3737
ctx.save();
38-
translate(ctx, this, rotation);
38+
translate(ctx, this, label.rotation);
3939
ctx.beginPath();
4040
ctx.rect(x + halfBorder + padding.left, y + halfBorder + padding.top,
4141
width - borderWidth - padding.width, height - borderWidth - padding.height);
@@ -79,6 +79,7 @@ BoxAnnotation.defaults = {
7979
height: undefined,
8080
padding: 6,
8181
position: 'center',
82+
rotation: undefined,
8283
textAlign: 'start',
8384
textStrokeColor: undefined,
8485
textStrokeWidth: 0,

‎test/fixtures/box/labelRotation.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
module.exports = {
2+
config: {
3+
type: 'scatter',
4+
options: {
5+
scales: {
6+
x: {
7+
display: false,
8+
min: 0,
9+
max: 10
10+
},
11+
y: {
12+
display: false,
13+
min: 0,
14+
max: 10
15+
}
16+
},
17+
plugins: {
18+
annotation: {
19+
annotations: {
20+
box1: {
21+
type: 'box',
22+
xMin: 1,
23+
xMax: 3,
24+
yMin: 9,
25+
yMax: 7,
26+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
27+
borderColor: 'rgba(255, 99, 132)',
28+
label: {
29+
enabled: true,
30+
rotation: 45,
31+
content: 'rotation: 45',
32+
}
33+
},
34+
box2: {
35+
type: 'box',
36+
xMin: 4,
37+
xMax: 6,
38+
yMin: 9,
39+
yMax: 7,
40+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
41+
borderColor: 'rgba(255, 99, 132)',
42+
label: {
43+
enabled: true,
44+
rotation: 90,
45+
content: 'rotation: 90',
46+
}
47+
},
48+
box3: {
49+
type: 'box',
50+
xMin: 7,
51+
xMax: 9,
52+
yMin: 9,
53+
yMax: 7,
54+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
55+
borderColor: 'rgba(255, 99, 132)',
56+
label: {
57+
enabled: true,
58+
rotation: 135,
59+
content: 'rotation: 135',
60+
}
61+
},
62+
box4: {
63+
type: 'box',
64+
xMin: 1,
65+
xMax: 3,
66+
yMin: 6,
67+
yMax: 4,
68+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
69+
borderColor: 'rgba(255, 99, 132)',
70+
label: {
71+
enabled: true,
72+
rotation: 180,
73+
content: 'rotation: 180',
74+
}
75+
},
76+
box5: {
77+
type: 'box',
78+
xMin: 4,
79+
xMax: 6,
80+
yMin: 6,
81+
yMax: 4,
82+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
83+
borderColor: 'rgba(255, 99, 132)',
84+
label: {
85+
enabled: true,
86+
rotation: 225,
87+
content: 'rotation: 225',
88+
}
89+
},
90+
box6: {
91+
type: 'box',
92+
xMin: 7,
93+
xMax: 9,
94+
yMin: 6,
95+
yMax: 4,
96+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
97+
borderColor: 'rgba(255, 99, 132)',
98+
label: {
99+
enabled: true,
100+
rotation: 270,
101+
content: 'rotation: 270',
102+
}
103+
},
104+
box7: {
105+
type: 'box',
106+
xMin: 1,
107+
xMax: 3,
108+
yMin: 3,
109+
yMax: 1,
110+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
111+
borderColor: 'rgba(255, 99, 132)',
112+
label: {
113+
enabled: true,
114+
rotation: 315,
115+
content: 'rotation: 315',
116+
}
117+
},
118+
box8: {
119+
type: 'box',
120+
xMin: 4,
121+
xMax: 6,
122+
yMin: 3,
123+
yMax: 1,
124+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
125+
borderColor: 'rgba(255, 99, 132)',
126+
rotation: 45,
127+
label: {
128+
enabled: true,
129+
rotation: 0,
130+
content: ['box rot: 45', 'label rot: 0']
131+
}
132+
}
133+
}
134+
}
135+
}
136+
}
137+
},
138+
options: {
139+
spriteText: true
140+
}
141+
};

‎test/fixtures/box/labelRotation.png‎

27.9 KB
Loading

‎types/label.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export interface BoxLabelOptions extends CoreLabelOptions {
117117
* @default true
118118
*/
119119
enabled?: Scriptable<boolean, PartialEventContext>,
120+
rotation?: Scriptable<number, PartialEventContext>
120121
}
121122

122123
export interface LabelTypeOptions extends ContainedLabelOptions {

0 commit comments

Comments
 (0)