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 b23c2ff8213..00950f5621f 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 00000000000..7ed2d97ef5c --- /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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 literal 0 HcmV?d00001