Skip to content

Commit

Permalink
Fixed issue #91 - problem with plate borders draw on a device with hi…
Browse files Browse the repository at this point in the history 
…gh pixel ratio
  • Loading branch information
@Mikhus
Mikhus committed Dec 25, 2016
1 parent 1cba79b commit 008b8d0
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 39 deletions.
2 changes: 1 addition & 1 deletion docs-coverage.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions gauge.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion gauge.min.js.map
View file

Large diffs are not rendered by default.

49 changes: 27 additions & 22 deletions lib/LinearGauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,18 +134,23 @@ function drawLinearBorder(context, width, r, x, y, w, h, colorStart, colorEnd) {
* @param {number} h
*/
function drawLinearPlate(context, options, x, y, w, h) {
let pxRatio = SmartCanvas.pixelRatio;
context.save();

let r = options.borderRadius;
let w1 = w - options.borderShadowWidth - options.borderOuterWidth;
let w2 = w1 - options.borderOuterWidth - options.borderMiddleWidth;
let w3 = w2 - options.borderMiddleWidth - options.borderInnerWidth;
let w4 = w3 - options.borderInnerWidth;

let h1 = h - options.borderShadowWidth - options.borderOuterWidth;
let h2 = h1 - options.borderOuterWidth - options.borderMiddleWidth;
let h3 = h2 - options.borderMiddleWidth - options.borderInnerWidth;
let h4 = h3 - options.borderInnerWidth;
let r = options.borderRadius * pxRatio;
let w1 = w - options.borderShadowWidth - options.borderOuterWidth * pxRatio;
let w2 = w1 - options.borderOuterWidth * pxRatio -
options.borderMiddleWidth * pxRatio;
let w3 = w2 - options.borderMiddleWidth * pxRatio -
options.borderInnerWidth * pxRatio;
let w4 = w3 - options.borderInnerWidth * pxRatio;

let h1 = h - options.borderShadowWidth - options.borderOuterWidth * pxRatio;
let h2 = h1 - options.borderOuterWidth * pxRatio -
options.borderMiddleWidth * pxRatio;
let h3 = h2 - options.borderMiddleWidth * pxRatio -
options.borderInnerWidth * pxRatio;
let h4 = h3 - options.borderInnerWidth * pxRatio;

let x2 = x - (w2 - w1) / 2;
let x3 = x2 - (w3 - w2) / 2;
Expand All @@ -159,40 +164,40 @@ function drawLinearPlate(context, options, x, y, w, h) {

if (options.borderOuterWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawLinearBorder(context, options.borderOuterWidth,
drawLinearBorder(context, options.borderOuterWidth * pxRatio,
r,
x + options.borderOuterWidth / 2 - aliasingOffset,
y + options.borderOuterWidth / 2 - aliasingOffset,
x + options.borderOuterWidth * pxRatio / 2 - aliasingOffset,
y + options.borderOuterWidth * pxRatio / 2 - aliasingOffset,
w1, h1,
options.colorBorderOuter,
options.colorBorderOuterEnd);
aliasingOffset += 0.5;
aliasingOffset += 0.5 * pxRatio;
}

if (options.borderMiddleWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawLinearBorder(context, options.borderMiddleWidth,
drawLinearBorder(context, options.borderMiddleWidth * pxRatio,
(r -= 1 + aliasingOffset * 2),
x2 + options.borderMiddleWidth / 2 - aliasingOffset,
y2 + options.borderMiddleWidth / 2 - aliasingOffset,
x2 + options.borderMiddleWidth * pxRatio / 2 - aliasingOffset,
y2 + options.borderMiddleWidth * pxRatio / 2 - aliasingOffset,
w2 + aliasingOffset * 2,
h2 + aliasingOffset * 2,
options.colorBorderMiddle,
options.colorBorderMiddleEnd);
aliasingOffset += 0.5;
aliasingOffset += 0.5 * pxRatio;
}

if (options.borderInnerWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawLinearBorder(context,options.borderInnerWidth,
drawLinearBorder(context,options.borderInnerWidth * pxRatio,
(r -= 1 + aliasingOffset * 2),
x3 + options.borderInnerWidth / 2 - aliasingOffset,
y3 + options.borderInnerWidth / 2 - aliasingOffset,
x3 + options.borderInnerWidth * pxRatio / 2 - aliasingOffset,
y3 + options.borderInnerWidth * pxRatio / 2 - aliasingOffset,
w3 + aliasingOffset * 2,
h3 + aliasingOffset * 2,
options.colorBorderInner,
options.colorBorderInnerEnd);
aliasingOffset += 0.5;
aliasingOffset += 0.5 * pxRatio;
}

drawings.drawShadow(context, options, shadowDrawn);
Expand Down
27 changes: 15 additions & 12 deletions lib/RadialGauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,14 @@ function drawRadialBorder(radius, width, context, start, end) {
* @return {number}
*/
function maxRadialRadius(context, options) {
let pxRatio = SmartCanvas.pixelRatio;

if (!context.maxRadius) {
context.maxRadius = context.max
- options.borderShadowWidth
- options.borderOuterWidth
- options.borderMiddleWidth
- options.borderInnerWidth
- options.borderOuterWidth * pxRatio
- options.borderMiddleWidth * pxRatio
- options.borderInnerWidth * pxRatio
+ (options.borderOuterWidth ? 0.5 : 0)
+ (options.borderMiddleWidth ? 0.5 : 0)
+ (options.borderInnerWidth ? 0.5 : 0);
Expand All @@ -121,12 +123,13 @@ function maxRadialRadius(context, options) {
* @param {RadialGaugeOptions} options
*/
function drawRadialPlate(context, options) {
let d0 = options.borderShadowWidth;
let r0 = context.max - d0 - options.borderOuterWidth / 2;
let r1 = r0 - options.borderOuterWidth / 2 -
options.borderMiddleWidth / 2 + 0.5;
let r2 = r1 - options.borderMiddleWidth / 2 -
options.borderInnerWidth / 2 + 0.5;
let pxRatio = SmartCanvas.pixelRatio;
let d0 = options.borderShadowWidth * pxRatio;
let r0 = context.max - d0 - (options.borderOuterWidth * pxRatio) / 2;
let r1 = r0 - (options.borderOuterWidth * pxRatio) / 2 -
(options.borderMiddleWidth * pxRatio) / 2 + 0.5;
let r2 = r1 - (options.borderMiddleWidth * pxRatio) / 2 -
(options.borderInnerWidth * pxRatio) / 2 + 0.5;
let r3 = maxRadialRadius(context, options);
let grad;
let shadowDrawn = false;
Expand All @@ -136,7 +139,7 @@ function drawRadialPlate(context, options) {
if (options.borderOuterWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawRadialBorder(r0,
options.borderOuterWidth,
options.borderOuterWidth * pxRatio,
context,
options.colorBorderOuter,
options.colorBorderOuterEnd);
Expand All @@ -145,7 +148,7 @@ function drawRadialPlate(context, options) {
if (options.borderMiddleWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawRadialBorder(r1,
options.borderMiddleWidth,
options.borderMiddleWidth * pxRatio,
context,
options.colorBorderMiddle,
options.colorBorderMiddleEnd);
Expand All @@ -154,7 +157,7 @@ function drawRadialPlate(context, options) {
if (options.borderInnerWidth) {
shadowDrawn = drawings.drawShadow(context, options, shadowDrawn);
drawRadialBorder(r2,
options.borderInnerWidth,
options.borderInnerWidth * pxRatio,
context,
options.colorBorderInner,
options.colorBorderInnerEnd);
Expand Down
2 changes: 1 addition & 1 deletion test-coverage.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 008b8d0

Please sign in to comment.