archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Remove unused helpers.canvas.roundedRect (#6734)

Browse Source
This commit is contained in:
Ben McCann 2019-11-15 04:49:41 -08:00 committed by Evert Timberg
parent 64b4776242
commit c12ca17e38
5 changed files with 1 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/getting-started/v3-migration.md
View File

@ -56,6 +56,7 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
* `helpers.numberOfLabelLines`
* `helpers.previousItem`
* `helpers.removeEvent`
* `helpers.roundedRect`
* `helpers.scaleMerge`
* `Scale.getRightValue`
* `Scale.mergeTicksOptions`

42
src/helpers/helpers.canvas.js
View File

@ -33,48 +33,6 @@ module.exports = {
chart.ctx.clearRect(0, 0, chart.width, chart.height);
},
/**
* Creates a "path" for a rectangle with rounded corners at position (x, y) with a
* given size (width, height) and the same `radius` for all corners.
* @param {CanvasRenderingContext2D} ctx - The canvas 2D Context.
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangle's width.
* @param {number} height - The rectangle's height.
* @param {number} radius - The rounded amount (in pixels) for the four corners.
* @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object?
*/
roundedRect: function(ctx, x, y, width, height, radius) {
if (radius) {
var r = Math.min(radius, height / 2, width / 2);
var left = x + r;
var top = y + r;
var right = x + width - r;
var bottom = y + height - r;
ctx.moveTo(x, top);
if (left < right && top < bottom) {
ctx.arc(left, top, r, -PI, -HALF_PI);
ctx.arc(right, top, r, -HALF_PI, 0);
ctx.arc(right, bottom, r, 0, HALF_PI);
ctx.arc(left, bottom, r, HALF_PI, PI);
} else if (left < right) {
ctx.moveTo(left, y);
ctx.arc(right, top, r, -HALF_PI, HALF_PI);
ctx.arc(left, top, r, HALF_PI, PI + HALF_PI);
} else if (top < bottom) {
ctx.arc(left, top, r, -PI, 0);
ctx.arc(left, bottom, r, 0, PI);
} else {
ctx.arc(left, top, r, -PI, PI);
}
ctx.closePath();
ctx.moveTo(x, y);
} else {
ctx.rect(x, y, width, height);
}
},
drawPoint: function(ctx, style, radius, x, y, rotation) {
var type, xOffset, yOffset, size, cornerRadius;
var rad = (rotation || 0) * RAD_PER_DEG;

39
test/fixtures/helpers.canvas/rounded-rect.js vendored
View File

@ -1,39 +0,0 @@
var roundedRect = Chart.helpers.canvas.roundedRect;
module.exports = {
config: {
type: 'line',
plugins: [{
afterDraw: function(chart) {
var ctx = chart.ctx;
ctx.strokeStyle = '#0000ff';
ctx.lineWidth = 4;
ctx.fillStyle = '#00ff00';
ctx.beginPath();
roundedRect(ctx, 10, 10, 50, 50, 25);
roundedRect(ctx, 70, 10, 100, 50, 25);
roundedRect(ctx, 10, 70, 50, 100, 25);
roundedRect(ctx, 70, 70, 100, 100, 25);
roundedRect(ctx, 180, 10, 50, 50, 100);
roundedRect(ctx, 240, 10, 100, 50, 100);
roundedRect(ctx, 180, 70, 50, 100, 100);
roundedRect(ctx, 240, 70, 100, 100, 100);
roundedRect(ctx, 350, 10, 50, 50, 0);
ctx.fill();
ctx.stroke();
}
}],
options: {
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};

BIN
test/fixtures/helpers.canvas/rounded-rect.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

64
test/specs/helpers.canvas.tests.js
View File

@ -23,70 +23,6 @@ describe('Chart.helpers.canvas', function() {
});
});
describe('roundedRect', function() {
it('should create a rounded rectangle path', function() {
var context = window.createMockContext();
helpers.canvas.roundedRect(context, 10, 20, 30, 40, 5);
expect(context.getCalls()).toEqual([
{name: 'moveTo', args: [10, 25]},
{name: 'arc', args: [15, 25, 5, -Math.PI, -Math.PI / 2]},
{name: 'arc', args: [35, 25, 5, -Math.PI / 2, 0]},
{name: 'arc', args: [35, 55, 5, 0, Math.PI / 2]},
{name: 'arc', args: [15, 55, 5, Math.PI / 2, Math.PI]},
{name: 'closePath', args: []},
{name: 'moveTo', args: [10, 20]}
]);
});
it('should optimize path if radius is exactly half of height', function() {
var context = window.createMockContext();
helpers.canvas.roundedRect(context, 10, 20, 40, 30, 15);
expect(context.getCalls()).toEqual([
{name: 'moveTo', args: [10, 35]},
{name: 'moveTo', args: [25, 20]},
{name: 'arc', args: [35, 35, 15, -Math.PI / 2, Math.PI / 2]},
{name: 'arc', args: [25, 35, 15, Math.PI / 2, Math.PI * 3 / 2]},
{name: 'closePath', args: []},
{name: 'moveTo', args: [10, 20]}
]);
});
it('should optimize path if radius is exactly half of width', function() {
var context = window.createMockContext();
helpers.canvas.roundedRect(context, 10, 20, 30, 40, 15);
expect(context.getCalls()).toEqual([
{name: 'moveTo', args: [10, 35]},
{name: 'arc', args: [25, 35, 15, -Math.PI, 0]},
{name: 'arc', args: [25, 45, 15, 0, Math.PI]},
{name: 'closePath', args: []},
{name: 'moveTo', args: [10, 20]}
]);
});
it('should optimize path if radius is exactly half of width and height', function() {
var context = window.createMockContext();
helpers.canvas.roundedRect(context, 10, 20, 30, 30, 15);
expect(context.getCalls()).toEqual([
{name: 'moveTo', args: [10, 35]},
{name: 'arc', args: [25, 35, 15, -Math.PI, Math.PI]},
{name: 'closePath', args: []},
{name: 'moveTo', args: [10, 20]}
]);
});
it('should optimize path if radius is 0', function() {
var context = window.createMockContext();
helpers.canvas.roundedRect(context, 10, 20, 30, 40, 0);
expect(context.getCalls()).toEqual([{name: 'rect', args: [10, 20, 30, 40]}]);
});
});
describe('isPointInArea', function() {
it('should determine if a point is in the area', function() {
var isPointInArea = helpers.canvas._isPointInArea;