mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
* Fix #10749 - backdrops with rotated labels * remove translation adjustment Because backdrop now occurs after translation, we don't want to double-adjust the position. * increase tolerance slightly due to anti-aliasing Co-authored-by: Charles McNulty <charles.mcnulty@tasconline.com>
This commit is contained in:
parent
b0160e138a
commit
fbf3427ca2
@ -1253,8 +1253,8 @@ export default class Scale extends Element {
|
||||
const height = labelSizes.heights[i];
|
||||
const width = labelSizes.widths[i];
|
||||
|
||||
let top = y + textOffset - labelPadding.top;
|
||||
let left = x - labelPadding.left;
|
||||
let top = textOffset - labelPadding.top;
|
||||
let left = 0 - labelPadding.left;
|
||||
|
||||
switch (textBaseline) {
|
||||
case 'middle':
|
||||
@ -1554,11 +1554,6 @@ export default class Scale extends Element {
|
||||
const tickFont = item.font;
|
||||
const label = item.label;
|
||||
|
||||
if (item.backdrop) {
|
||||
ctx.fillStyle = item.backdrop.color;
|
||||
ctx.fillRect(item.backdrop.left, item.backdrop.top, item.backdrop.width, item.backdrop.height);
|
||||
}
|
||||
|
||||
let y = item.textOffset;
|
||||
renderText(ctx, label, 0, y, tickFont, item);
|
||||
}
|
||||
|
@ -340,6 +340,10 @@ export function renderText(ctx, text, x, y, font, opts = {}) {
|
||||
for (i = 0; i < lines.length; ++i) {
|
||||
line = lines[i];
|
||||
|
||||
if (opts.backdrop) {
|
||||
drawBackdrop(ctx, opts.backdrop);
|
||||
}
|
||||
|
||||
if (stroke) {
|
||||
if (opts.strokeColor) {
|
||||
ctx.strokeStyle = opts.strokeColor;
|
||||
@ -408,6 +412,14 @@ function decorateText(ctx, x, y, line, opts) {
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackdrop(ctx, opts) {
|
||||
const oldColor = ctx.fillStyle;
|
||||
|
||||
ctx.fillStyle = opts.color;
|
||||
ctx.fillRect(opts.left, opts.top, opts.width, opts.height);
|
||||
ctx.fillStyle = oldColor;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a path of a rectangle with rounded corners to the current sub-path
|
||||
* @param {CanvasRenderingContext2D} ctx Context
|
||||
|
85
test/fixtures/core.scale/tick-backdrop-rotation.js
vendored
Normal file
85
test/fixtures/core.scale/tick-backdrop-rotation.js
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
const grid = {
|
||||
display: false
|
||||
};
|
||||
const title = {
|
||||
display: false,
|
||||
};
|
||||
module.exports = {
|
||||
tolerance: 0.0016,
|
||||
config: {
|
||||
type: 'line',
|
||||
options: {
|
||||
events: [],
|
||||
scales: {
|
||||
top: {
|
||||
type: 'linear',
|
||||
position: 'top',
|
||||
ticks: {
|
||||
display: true,
|
||||
showLabelBackdrop: true,
|
||||
minRotation: 45,
|
||||
backdropColor: 'blue',
|
||||
backdropPadding: 5,
|
||||
align: 'start',
|
||||
crossAlign: 'near',
|
||||
},
|
||||
grid,
|
||||
title
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
display: true,
|
||||
showLabelBackdrop: true,
|
||||
minRotation: 90,
|
||||
backdropColor: 'green',
|
||||
backdropPadding: {
|
||||
x: 2,
|
||||
y: 5
|
||||
},
|
||||
crossAlign: 'center',
|
||||
},
|
||||
grid,
|
||||
title
|
||||
},
|
||||
bottom: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
ticks: {
|
||||
display: true,
|
||||
showLabelBackdrop: true,
|
||||
backdropColor: 'blue',
|
||||
backdropPadding: {
|
||||
x: 5,
|
||||
y: 5
|
||||
},
|
||||
align: 'end',
|
||||
crossAlign: 'far',
|
||||
minRotation: 60,
|
||||
},
|
||||
grid,
|
||||
title
|
||||
},
|
||||
right: {
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
ticks: {
|
||||
display: true,
|
||||
showLabelBackdrop: true,
|
||||
backdropColor: 'gray',
|
||||
},
|
||||
grid,
|
||||
title
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
canvas: {
|
||||
height: 256,
|
||||
width: 256
|
||||
},
|
||||
spriteText: true,
|
||||
}
|
||||
};
|
BIN
test/fixtures/core.scale/tick-backdrop-rotation.png
vendored
Normal file
BIN
test/fixtures/core.scale/tick-backdrop-rotation.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in New Issue
Block a user