@lightningtv/renderer
Version:
Lightning 3 Renderer
68 lines • 2.63 kB
JavaScript
/*
* Copyright 2023 Comcast Cable Communications Management, LLC
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
*/
import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
export const RadialGradient = {
props: RadialGradientTemplate.props,
update(node) {
let scaleX = 1;
let scaleY = 1;
const pWidth = this.props.width;
const pHeight = this.props.height;
if (pWidth > pHeight) {
scaleX = pWidth / pHeight;
}
else if (pHeight > pWidth) {
scaleY = pHeight / pWidth;
}
this.computed = {
pivotX: this.props.pivot[0] * node.width,
pivotY: this.props.pivot[1] * node.height,
scaleX,
scaleY,
size: Math.min(pWidth, pHeight) * 0.5,
colors: this.props.colors.map((value) => this.toColorString(value)),
};
},
render(ctx, quad, renderContext) {
renderContext();
const { scaleX, scaleY, pivotX, pivotY } = this.computed;
const colors = this.computed.colors;
let x = quad.tx + pivotX;
let y = quad.ty + pivotY;
if (scaleX === scaleY) {
const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.computed.size);
for (let i = 0; i < colors.length; i++) {
gradient.addColorStop(this.props['stops'][i], colors[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
return;
}
ctx.save();
ctx.scale(scaleX, scaleY);
x = x / scaleX;
y = y / scaleY;
const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.computed.size);
for (let i = 0; i < colors.length; i++) {
gradient.addColorStop(this.props['stops'][i], colors[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(quad.tx / scaleX, quad.ty / scaleY, quad.width / scaleX, quad.height / scaleY);
ctx.restore();
},
};
//# sourceMappingURL=RadialGradient.js.map