From: Evert Timberg Date: Sat, 14 Nov 2015 03:04:38 +0000 (-0500) Subject: Refactor the line drawing code. Tests are broken. X-Git-Tag: 2.0.0-beta1~25^2~12 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=05523b01b0207fd6d6ce00a45d8c6f773df4137d;p=thirdparty%2FChart.js.git Refactor the line drawing code. Tests are broken. --- diff --git a/src/elements/element.line.js b/src/elements/element.line.js index f094dea6e..85d84e929 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -31,87 +31,91 @@ Chart.elements.Line = Chart.Element.extend({ - draw: function() { - - var vm = this._view; + lineToNextPoint: function(previousPoint, point, nextPoint) { var ctx = this._chart.ctx; - var first = this._children[0]; - var last = this._children[this._children.length - 1]; - - ctx.save(); - - // Draw the background first (so the border is always on top) - helpers.each(this._children, function(point, index) { - var previous = helpers.previousItem(this._children, index); - var next = helpers.nextItem(this._children, index); - - // First point moves to it's starting position no matter what - if (!index) { - ctx.moveTo(point._view.x, vm.scaleZero); - } - - // Skip this point, draw to scaleZero, move to next point, and draw to next point - if (point._view.skip && !this.loop) { - ctx.lineTo(previous._view.x, vm.scaleZero); - ctx.moveTo(next._view.x, vm.scaleZero); - return; - } - - // The previous line was skipped, so just draw a normal straight line to the point - if (previous._view.skip) { - ctx.lineTo(point._view.x, point._view.y); - return; + if (point._view.skip) { + if (this.loop) { + // Go to center + ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y); + } else { + ctx.lineTo(previousPoint._view.x, this._view.scaleZero); + ctx.moveTo(next._view.x, this._view.scaleZero); } - - // Draw a bezier to point - if (vm.tension > 0 && index) { - //ctx.lineTo(point._view.x, point._view.y); + } else if (previousPoint._view.skip) { + ctx.lineTo(point._view.x, point._view.y); + } else { + // Line between points + //if (point !== nextPoint) { ctx.bezierCurveTo( - previous._view.controlPointNextX, - previous._view.controlPointNextY, + previousPoint._view.controlPointNextX, + previousPoint._view.controlPointNextY, point._view.controlPointPreviousX, point._view.controlPointPreviousY, point._view.x, point._view.y ); - return; - } + //} else { + // Drawing to the last point in the line - // Draw a straight line to the point - ctx.lineTo(point._view.x, point._view.y); + //} + } + }, - }, this); + draw: function() { - // For radial scales, loop back around to the first point - if (this._loop) { - // Draw a bezier line - if (vm.tension > 0 && !first._view.skip) { - ctx.bezierCurveTo( - last._view.controlPointNextX, - last._view.controlPointNextY, - first._view.controlPointPreviousX, - first._view.controlPointPreviousY, - first._view.x, - first._view.y - ); - return; - } - // Draw a straight line - ctx.lineTo(first._view.x, first._view.y); - } + var vm = this._view; + var ctx = this._chart.ctx; + var first = this._children[0]; + var last = this._children[this._children.length - 1]; + + ctx.save(); // If we had points and want to fill this line, do so. if (this._children.length > 0 && vm.fill) { - //Round off the line by going to the base of the chart, back to the start, then fill. - ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero); - ctx.lineTo(this._children[0]._view.x, vm.scaleZero); + // Draw the background first (so the border is always on top) + ctx.beginPath(); + + helpers.each(this._children, function(point, index) { + var previous = helpers.previousItem(this._children, index/*, this._loop*/); + var next = helpers.nextItem(this._children, index/*, this._loop*/); + + // First point moves to it's starting position no matter what + if (index === 0) { + ctx.moveTo(point._view.x, vm.scaleZero); + ctx.lineTo(point._view.x, point._view.y); + } else { + this.lineToNextPoint(previous, point, next); + } + }, this); + + // For radial scales, loop back around to the first point + if (this._loop) { + if (!first._view.skip) { + // Draw a bezier line + ctx.bezierCurveTo( + last._view.controlPointNextX, + last._view.controlPointNextY, + first._view.controlPointPreviousX, + first._view.controlPointPreviousY, + first._view.x, + first._view.y + ); + } else { + // Go to center + ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y); + } + } else { + //Round off the line by going to the base of the chart, back to the start, then fill. + ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero); + ctx.lineTo(this._children[0]._view.x, vm.scaleZero); + } + ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor; ctx.closePath(); ctx.fill(); } - // Now draw the line between all the points with any borders ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle; @@ -130,49 +134,16 @@ var previous = helpers.previousItem(this._children, index); var next = helpers.nextItem(this._children, index); - if (!index) { - ctx.moveTo(point._view.x, vm.scaleZero); - } - - // Skip this point and move to the next points zeroPoint - if (point._view.skip && !this.loop) { - ctx.moveTo(next._view.x, vm.scaleZero); - return; - } - - // Previous point was skipped, just move to the point - if (previous._view.skip) { - ctx.moveTo(point._view.x, point._view.y); - return; - } - - // If First point, move to the point ahead of time (so a line doesn't get drawn up the left axis) - if (!index) { + if (index === 0) { ctx.moveTo(point._view.x, point._view.y); + } else { + this.lineToNextPoint(previous, point, next); } - - // Draw a bezier line to the point - if (vm.tension > 0 && index) { - ctx.bezierCurveTo( - previous._view.controlPointNextX, - previous._view.controlPointNextY, - point._view.controlPointPreviousX, - point._view.controlPointPreviousY, - point._view.x, - point._view.y - ); - return; - } - - // Draw a straight line to the point - ctx.lineTo(point._view.x, point._view.y); - }, this); - if (this._loop && !first._view.skip) { - - // Draw a bezier line to the first point - if (vm.tension > 0) { + if (this._loop) { + if (!first._view.skip) { + // Draw a bezier line ctx.bezierCurveTo( last._view.controlPointNextX, last._view.controlPointNextY, @@ -181,11 +152,10 @@ first._view.x, first._view.y ); - return; + } else { + // Go to center + ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y); } - - // Draw a straight line to the first point - ctx.lineTo(first._view.x, first._view.y); } ctx.stroke();