From 518efd58b6473adc9d498d5637e2f443716be3e3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 17:06:46 +0200 Subject: [PATCH] Rounded Corners Working --- Frame.js | 50 +++------------------ StrategySpace/StrategyCollectionItem.js | 36 ++++----------- Utilities/RoundedCornersBackground.js | 58 +++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 72 deletions(-) create mode 100644 Utilities/RoundedCornersBackground.js diff --git a/Frame.js b/Frame.js index 28df28c82..c7b6ce70c 100644 --- a/Frame.js +++ b/Frame.js @@ -290,25 +290,14 @@ function newFrame () { } function background () { - borderPoint1 = { - x: PANEL_CORNERS_RADIOUS, - y: PANEL_CORNERS_RADIOUS + let params = { + cornerRadious: 5, + lineWidth: 0.1, + opacity: 0.75, + container: frame.container } - borderPoint2 = { - x: frame.width - PANEL_CORNERS_RADIOUS, - y: PANEL_CORNERS_RADIOUS - } - - borderPoint3 = { - x: frame.width - PANEL_CORNERS_RADIOUS, - y: frame.height - PANEL_CORNERS_RADIOUS - } - - borderPoint4 = { - x: PANEL_CORNERS_RADIOUS, - y: frame.height - PANEL_CORNERS_RADIOUS - } + roundedCornersBackground(params) titleBarPoint1 = { x: 0, @@ -322,36 +311,9 @@ function newFrame () { /* Now the transformations. */ - borderPoint1 = frameThisPoint(borderPoint1) - borderPoint2 = frameThisPoint(borderPoint2) - borderPoint3 = frameThisPoint(borderPoint3) - borderPoint4 = frameThisPoint(borderPoint4) - titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) - /* We paint the panel background first */ - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)' - browserCanvasContext.beginPath() - - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y) - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)' - browserCanvasContext.stroke() - /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 53767ee7b..6b3f89209 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -82,37 +82,16 @@ function newStrategyCollectionItem () { } function borders () { - let point1 - let point2 - let point3 - let point4 - - point1 = { - x: 0, - y: 0 + let params = { + cornerRadious: 5, + lineWidth: 0.5, + opacity: 0.8, + container: thisObject.container } - point2 = { - x: thisObject.container.frame.width, - y: 0 - } + roundedCornersBackground(params) - point3 = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } - - point4 = { - x: 0, - y: thisObject.container.frame.height - } - - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) - - let opacity + return /* Shadow */ @@ -153,3 +132,4 @@ function newStrategyCollectionItem () { browserCanvasContext.stroke() } } + diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js new file mode 100644 index 000000000..8a9edae8b --- /dev/null +++ b/Utilities/RoundedCornersBackground.js @@ -0,0 +1,58 @@ +function roundedCornersBackground (params) { + borderPoint1 = { + x: params.cornerRadious, + y: params.cornerRadious + } + + borderPoint2 = { + x: params.container.frame.width - params.cornerRadious, + y: params.cornerRadious + } + + borderPoint3 = { + x: params.container.frame.width - params.cornerRadious, + y: params.container.frame.height - params.cornerRadious + } + + borderPoint4 = { + x: params.cornerRadious, + y: params.container.frame.height - params.cornerRadious + } + + /* Now the transformations. */ + + borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) + borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) + borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) + borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + + /* We paint the panel background */ + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + params.opacity + ')' + + browserCanvasContext.setLineDash([0, 0]) + + browserCanvasContext.beginPath() + + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y) + + browserCanvasContext.closePath() + + browserCanvasContext.lineWidth = params.lineWidth * 15 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.fill() + + browserCanvasContext.lineWidth = params.lineWidth + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')' + browserCanvasContext.stroke() +} +