From 70b32ff20edc621022db194fe3439d9e9c010d02 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Fri, 24 May 2019 15:35:47 +0800 Subject: [PATCH] Support rotation for pointStyle image (#6287) --- src/helpers/helpers.canvas.js | 6 +- .../element.point/point-style-image.js | 58 ++++++++++++++++++ .../element.point/point-style-image.png | Bin 0 -> 8445 bytes 3 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 test/fixtures/element.point/point-style-image.js create mode 100644 test/fixtures/element.point/point-style-image.png diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index b23c2ff82..00950f562 100644 --- a/src/helpers/helpers.canvas.js +++ b/src/helpers/helpers.canvas.js @@ -70,7 +70,11 @@ var exports = { if (style && typeof style === 'object') { type = style.toString(); if (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') { - ctx.drawImage(style, x - style.width / 2, y - style.height / 2, style.width, style.height); + ctx.save(); + ctx.translate(x, y); + ctx.rotate(rad); + ctx.drawImage(style, -style.width / 2, -style.height / 2, style.width, style.height); + ctx.restore(); return; } } diff --git a/test/fixtures/element.point/point-style-image.js b/test/fixtures/element.point/point-style-image.js new file mode 100644 index 000000000..7ed2d97ef --- /dev/null +++ b/test/fixtures/element.point/point-style-image.js @@ -0,0 +1,58 @@ +var imageCanvas = document.createElement('canvas'); +var imageContext = imageCanvas.getContext('2d'); + +imageCanvas.width = 40; +imageCanvas.height = 40; + +imageContext.fillStyle = '#f00'; +imageContext.beginPath(); +imageContext.moveTo(20, 0); +imageContext.lineTo(10, 40); +imageContext.lineTo(20, 30); +imageContext.closePath(); +imageContext.fill(); + +imageContext.fillStyle = '#a00'; +imageContext.beginPath(); +imageContext.moveTo(20, 0); +imageContext.lineTo(30, 40); +imageContext.lineTo(20, 30); +imageContext.closePath(); +imageContext.fill(); + +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5, 6, 7], + datasets: [{ + data: [0, 0, 0, 0, 0, 0, 0, 0], + showLine: false + }] + }, + options: { + responsive: false, + legend: false, + title: false, + elements: { + point: { + pointStyle: imageCanvas, + rotation: [0, 45, 90, 135, 180, 225, 270, 315] + } + }, + layout: { + padding: 20 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/element.point/point-style-image.png b/test/fixtures/element.point/point-style-image.png new file mode 100644 index 0000000000000000000000000000000000000000..eaa5e2d7c876b1d047a3dd60c9d294b94647beaf GIT binary patch literal 8445 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