106 lines
4.7 KiB
JavaScript
106 lines
4.7 KiB
JavaScript
function roundedCornersBackground (params) {
|
|
borderPoint1 = {
|
|
x: params.cornerRadius,
|
|
y: params.cornerRadius
|
|
}
|
|
|
|
borderPoint2 = {
|
|
x: params.container.frame.width - params.cornerRadius,
|
|
y: params.cornerRadius
|
|
}
|
|
|
|
borderPoint3 = {
|
|
x: params.container.frame.width - params.cornerRadius,
|
|
y: params.container.frame.height - params.cornerRadius
|
|
}
|
|
|
|
borderPoint4 = {
|
|
x: params.cornerRadius,
|
|
y: params.container.frame.height - params.cornerRadius
|
|
}
|
|
|
|
/* Now the transformations. */
|
|
|
|
if (params.coordinateSystem !== undefined) { // For instance Candles would use this
|
|
borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1)
|
|
borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2)
|
|
borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3)
|
|
borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4)
|
|
} else {
|
|
if (params.outsideViewPort === true) { // If the element is not affected by zoom
|
|
borderPoint1 = transformThisPoint(borderPoint1, params.container)
|
|
borderPoint2 = transformThisPoint(borderPoint2, params.container)
|
|
borderPoint3 = transformThisPoint(borderPoint3, params.container)
|
|
borderPoint4 = transformThisPoint(borderPoint4, params.container)
|
|
} else { // For instance Panels use this
|
|
borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
|
|
borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
|
|
borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
|
|
borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
|
|
}
|
|
}
|
|
|
|
if (params.fitFunction !== undefined) {
|
|
borderPoint1 = params.fitFunction(borderPoint1)
|
|
borderPoint2 = params.fitFunction(borderPoint2)
|
|
borderPoint3 = params.fitFunction(borderPoint3)
|
|
borderPoint4 = params.fitFunction(borderPoint4)
|
|
}
|
|
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
|
|
/* Shadow */
|
|
|
|
if (params.castShadow === true) {
|
|
let SHADOW_OFFSET = 2
|
|
|
|
browserCanvasContext.beginPath()
|
|
|
|
browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET)
|
|
browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
|
|
browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET)
|
|
browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
|
|
|
|
browserCanvasContext.closePath()
|
|
|
|
browserCanvasContext.lineWidth = 10
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
|
|
browserCanvasContext.stroke()
|
|
|
|
browserCanvasContext.lineWidth = 5
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
|
|
browserCanvasContext.stroke()
|
|
|
|
browserCanvasContext.lineWidth = 1
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|
|
|
|
/* Background */
|
|
|
|
browserCanvasContext.beginPath()
|
|
|
|
browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius)
|
|
browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y)
|
|
browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius)
|
|
browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
|
|
browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y)
|
|
|
|
browserCanvasContext.closePath()
|
|
|
|
browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
|
|
|
|
browserCanvasContext.fill()
|
|
|
|
browserCanvasContext.lineWidth = params.lineWidth
|
|
browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|