mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Use offsetX/Y or layerX/Y for events when available (#7732)
* Use offsetX/offsetY for events when available * Fall to layerX/layerY for FF compatibility
This commit is contained in:
parent
d561486b4e
commit
baa4429ad1
@ -90,21 +90,22 @@ function _calculatePadding(container, padding, parentDimension) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function getRelativePosition(evt, chart) {
|
export function getRelativePosition(evt, chart) {
|
||||||
let mouseX, mouseY;
|
|
||||||
const e = evt.originalEvent || evt;
|
const e = evt.originalEvent || evt;
|
||||||
const canvasElement = chart.canvas;
|
|
||||||
const boundingRect = canvasElement.getBoundingClientRect();
|
|
||||||
|
|
||||||
const touches = e.touches;
|
const touches = e.touches;
|
||||||
if (touches && touches.length > 0) {
|
const source = touches && touches.length ? touches[0] : e;
|
||||||
mouseX = touches[0].clientX;
|
const clientX = source.clientX;
|
||||||
mouseY = touches[0].clientY;
|
const clientY = source.clientY;
|
||||||
|
|
||||||
} else {
|
const x = source.offsetX || source.layerX || clientX;
|
||||||
mouseX = e.clientX;
|
const y = source.offsetY || source.layerY || clientY;
|
||||||
mouseY = e.clientY;
|
|
||||||
|
if (x !== clientX && y !== clientY) {
|
||||||
|
return {x, y};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const canvasElement = chart.canvas;
|
||||||
|
const devicePixelRatio = chart.currentDevicePixelRatio;
|
||||||
|
const boundingRect = canvasElement.getBoundingClientRect();
|
||||||
// Scale mouse coordinates into canvas coordinates
|
// Scale mouse coordinates into canvas coordinates
|
||||||
// by following the pattern laid out by 'jerryj' in the comments of
|
// by following the pattern laid out by 'jerryj' in the comments of
|
||||||
// https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
|
// https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
|
||||||
@ -117,12 +118,9 @@ export function getRelativePosition(evt, chart) {
|
|||||||
|
|
||||||
// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
|
// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
|
||||||
// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
|
// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
|
||||||
mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvasElement.width / chart.currentDevicePixelRatio);
|
|
||||||
mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvasElement.height / chart.currentDevicePixelRatio);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x: mouseX,
|
x: Math.round((x - boundingRect.left - paddingLeft) / (width) * canvasElement.width / devicePixelRatio),
|
||||||
y: mouseY
|
y: Math.round((y - boundingRect.top - paddingTop) / (height) * canvasElement.height / devicePixelRatio)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user