Skip to content

Commit f8cc9c6

Browse files
stockiNailstockiNail
committed
2 parents f9835e1 + 76ba0e9 commit f8cc9c6

16 files changed

+401
-2
lines changed

‎docs/guide/types/_commonInnerLabel.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
1212
| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options.md#draw-time). Defaults to the annotation draw time if unset
1313
| `font` | [`Font`](../options.md#font) | `{ weight: 'bold' }` | Label font
1414
| `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.
15+
| `opacity` | `number` | `undefined` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
1516
| `padding` | [`Padding`](../options.md#padding) | `6` | The padding to add around the text label.
1617
| [`position`](#position) | `string`\|`{x: string, y: string}` | `'center'` | Anchor position of label in the annotation.
1718
| `rotation` | `number` | `undefined` | Rotation of label, in degrees. If `undefined`, the annotation rotation is used.

‎docs/guide/types/label.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ The following options are available for label annotations.
6464
| [`content`](#general) | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | Yes | `null`
6565
| [`font`](#styling) | [`Font`](../options.md#font) | Yes | `{}`
6666
| [`height`](#general) | `number`\|`string` | Yes | `undefined`
67+
| [`opacity`](#styling) | `number` | Yes | `undefined`
6768
| [`padding`](#general) | [`Padding`](../options.md#padding) | Yes | `6`
6869
| [`position`](#position) | `string`\|`{x: string, y: string}` | Yes | `'center'`
6970
| [`rotation`](#general) | `number`| Yes | `0`
@@ -123,6 +124,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
123124
| `borderWidth` | Stroke width (in pixels).
124125
| `color` | Text color.
125126
| `font` | Text font.
127+
| `opacity` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
126128
| `shadowBlur` | The amount of blur applied to shadow of the box where the label is located. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur).
127129
| `shadowOffsetX` | The distance that shadow, of the box where the label is located, will be offset horizontally. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX).
128130
| `shadowOffsetY` | The distance that shadow, of the box where the label is located, will be offset vertically. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY).

‎docs/guide/types/line.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
137137
| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options.md#draw-time). Defaults to the line annotation draw time if unset.
138138
| `font` | [`Font`](../options.md#font) | `{ weight: 'bold' }` | Label font.
139139
| `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.
140+
| `opacity` | `number` | `undefined` | Overrides the opacity of the image or canvas element. Could be set a number in the range 0.0 to 1.0, inclusive. If undefined, uses the opacity of the image or canvas element. It is used only when the content is an image or canvas element.
140141
| `padding` | [`Padding`](../options.md#padding) | `6` | The padding to add around the text label.
141142
| `position` | `string` | `'center'` | Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`. It can be set by a string in percentage format `'number%'` which are representing the percentage on the width of the line where the label will be located.
142143
| `rotation` | `number`\|`'auto'` | `0` | Rotation of label, in degrees, or 'auto' to use the degrees of the line.

‎src/helpers/helpers.canvas.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {addRoundedRectPath, isArray, toFont, toTRBLCorners, toRadians} from 'chart.js/helpers';
2-
import {clampAll} from './helpers.core';
1+
import {addRoundedRectPath, isArray, isNumber, toFont, toTRBLCorners, toRadians} from 'chart.js/helpers';
2+
import {clampAll, clamp} from './helpers.core';
33
import {calculateTextAlignment, getSize} from './helpers.options';
44

55
const widthCache = new Map();
@@ -130,7 +130,10 @@ export function drawBox(ctx, rect, options) {
130130
export function drawLabel(ctx, rect, options) {
131131
const content = options.content;
132132
if (isImageOrCanvas(content)) {
133+
ctx.save();
134+
ctx.globalAlpha = getOpacity(options.opacity, content.style.opacity);
133135
ctx.drawImage(content, rect.x, rect.y, rect.width, rect.height);
136+
ctx.restore();
134137
return;
135138
}
136139
const labels = isArray(content) ? content : [content];
@@ -160,3 +163,8 @@ function setTextStrokeStyle(ctx, options) {
160163
return true;
161164
}
162165
}
166+
167+
function getOpacity(value, elementValue) {
168+
const opacity = isNumber(value) ? value : elementValue;
169+
return isNumber(opacity) ? clamp(opacity, 0, 1) : 1;
170+
}

‎src/types/box.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ BoxAnnotation.defaults = {
6060
weight: 'bold'
6161
},
6262
height: undefined,
63+
opacity: undefined,
6364
padding: 6,
6465
position: 'center',
6566
rotation: undefined,

‎src/types/label.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ LabelAnnotation.defaults = {
8686
weight: undefined
8787
},
8888
height: undefined,
89+
opacity: undefined,
8990
padding: 6,
9091
position: 'center',
9192
rotation: 0,

‎src/types/line.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ LineAnnotation.defaults = {
164164
weight: 'bold'
165165
},
166166
height: undefined,
167+
opacity: undefined,
167168
padding: 6,
168169
position: 'center',
169170
rotation: 0,

‎test/fixtures/box/labelCanvasOpacity.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
const canvas = window.createCanvas();
2+
canvas.style.opacity = 0.2;
3+
4+
module.exports = {
5+
tolerance: 0.0060,
6+
config: {
7+
type: 'scatter',
8+
options: {
9+
scales: {
10+
x: {
11+
display: true,
12+
min: -10,
13+
max: 10
14+
},
15+
y: {
16+
display: true,
17+
min: -10,
18+
max: 10
19+
}
20+
},
21+
plugins: {
22+
legend: false,
23+
annotation: {
24+
annotations: {
25+
canvas1: {
26+
type: 'box',
27+
xMin: -9,
28+
xMax: -1,
29+
yMin: 9,
30+
yMax: 1,
31+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
32+
borderColor: 'rgba(255, 99, 132)',
33+
borderWidth: 2,
34+
label: {
35+
display: true,
36+
position: 'start',
37+
content: canvas,
38+
width: '25%',
39+
height: '25%'
40+
}
41+
},
42+
canvas2: {
43+
type: 'box',
44+
xMin: 1,
45+
xMax: 9,
46+
yMin: 9,
47+
yMax: 1,
48+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
49+
borderColor: 'rgba(255, 99, 132)',
50+
borderWidth: 2,
51+
label: {
52+
display: true,
53+
position: 'end',
54+
content: canvas,
55+
opacity: 0.5,
56+
width: '25%',
57+
height: '25%'
58+
}
59+
},
60+
canvas3: {
61+
type: 'box',
62+
xMin: -9,
63+
xMax: -1,
64+
yMin: -1,
65+
yMax: -9,
66+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
67+
borderColor: 'rgba(255, 99, 132)',
68+
borderWidth: 2,
69+
label: {
70+
display: true,
71+
position: {
72+
x: 'start',
73+
y: 'center'
74+
},
75+
content: window.createCanvas,
76+
opacity: 0.2,
77+
width: '25%',
78+
height: '25%'
79+
}
80+
},
81+
canvas4: {
82+
type: 'box',
83+
xMin: 1,
84+
xMax: 9,
85+
yMin: -1,
86+
yMax: -9,
87+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
88+
borderColor: 'rgba(255, 99, 132)',
89+
borderWidth: 2,
90+
label: {
91+
display: true,
92+
position: {
93+
x: 'center',
94+
y: 'end'
95+
},
96+
content: window.createCanvas,
97+
opacity: 'mistake',
98+
width: '25%',
99+
height: '25%'
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}
106+
}
107+
};

‎test/fixtures/box/labelCanvasOpacity.png

21.9 KB
Loading

‎test/fixtures/ellipse/labelCanvasOpacity.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
const canvas = window.createCanvas();
2+
canvas.style.opacity = 0.2;
3+
4+
module.exports = {
5+
tolerance: 0.0060,
6+
config: {
7+
type: 'scatter',
8+
options: {
9+
scales: {
10+
x: {
11+
display: true,
12+
min: -10,
13+
max: 10
14+
},
15+
y: {
16+
display: true,
17+
min: -10,
18+
max: 10
19+
}
20+
},
21+
plugins: {
22+
legend: false,
23+
annotation: {
24+
annotations: {
25+
canvas1: {
26+
type: 'ellipse',
27+
xMin: -9,
28+
xMax: -1,
29+
yMin: 9,
30+
yMax: 1,
31+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
32+
borderColor: 'rgba(255, 99, 132)',
33+
borderWidth: 2,
34+
label: {
35+
display: true,
36+
position: 'start',
37+
content: canvas,
38+
width: '25%',
39+
height: '25%'
40+
}
41+
},
42+
canvas2: {
43+
type: 'ellipse',
44+
xMin: 1,
45+
xMax: 9,
46+
yMin: 9,
47+
yMax: 1,
48+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
49+
borderColor: 'rgba(255, 99, 132)',
50+
borderWidth: 2,
51+
label: {
52+
display: true,
53+
position: 'end',
54+
content: canvas,
55+
opacity: 0.5,
56+
width: '25%',
57+
height: '25%'
58+
}
59+
},
60+
canvas3: {
61+
type: 'ellipse',
62+
xMin: -9,
63+
xMax: -1,
64+
yMin: -1,
65+
yMax: -9,
66+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
67+
borderColor: 'rgba(255, 99, 132)',
68+
borderWidth: 2,
69+
label: {
70+
display: true,
71+
position: {
72+
x: 'start',
73+
y: 'center'
74+
},
75+
content: window.createCanvas,
76+
opacity: 0.2,
77+
width: '25%',
78+
height: '25%'
79+
}
80+
},
81+
canvas4: {
82+
type: 'ellipse',
83+
xMin: 1,
84+
xMax: 9,
85+
yMin: -1,
86+
yMax: -9,
87+
backgroundColor: 'rgba(255, 99, 132, 0.5)',
88+
borderColor: 'rgba(255, 99, 132)',
89+
borderWidth: 2,
90+
label: {
91+
display: true,
92+
position: {
93+
x: 'center',
94+
y: 'end'
95+
},
96+
content: window.createCanvas,
97+
opacity: 'mistake',
98+
width: '25%',
99+
height: '25%'
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}
106+
}
107+
};

0 commit comments

Comments
 (0)