babylon.js封装使用渐变色

码到成功♡

已于 2022-10-13 18:49:06 修改

阅读量366

点赞数

分类专栏：三维引擎文章标签： javascript 前端编辑器

于 2022-09-21 17:07:37 首次发布

本文链接：https://blog.csdn.net/yrrjiayou/article/details/126976510

版权

三维引擎专栏收录该内容

4 篇文章 1 订阅

订阅专栏

babylon.js里使用渐变色

  // 渐变色
        class GradientRectangle extends BABYLON.GUI.Rectangle {
            constructor(name) {
                super(name);
                this._gradientStart = "black";
                this._gradientEnd = "white"
                this._gradientVertical = true;
            }
            set gradientStart(value) {
                this._gradientStart = value;
            }
            get gradientStart() {
                return this._gradientStart;
            }
            set gradientEnd(value) {
                this._gradientEnd = value;
            }
            get gradientEnd() {
                return this._gradientEnd;
            }
            set gradientVertical(value) {
                this._gradientVertical = value ? true : false;
            }
            get gradientVertical() {
                return this._gradientVertical;
            }
            _localDraw(context/*: CanvasRenderingContext2D*/) {
                context.save();

                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                    context.shadowColor = this.shadowColor;
                    context.shadowBlur = this.shadowBlur;
                    context.shadowOffsetX = this.shadowOffsetX;
                    context.shadowOffsetY = this.shadowOffsetY;
                }
                if (this._gradientStart && this._gradientEnd) {
                    if (this._gradientVertical) {
                        this._gradient = context.createLinearGradient(0, this._currentMeasure.top, 0, this._currentMeasure.top + this._currentMeasure.height);
                    }
                    else {
                        this._gradient = context.createLinearGradient(this._currentMeasure.left, 0, this._currentMeasure.left + this._currentMeasure.width, 0);
                    }
                    this._gradient.addColorStop(0, this._gradientStart);
                    this._gradient.addColorStop(1, this._gradientEnd);

                    context.fillStyle = this._gradient;

                    if (this._cornerRadius) {
                        this._drawRoundedRect(context, this._thickness / 10);
                        context.fill();
                    } else {
                        context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                    }
                }

                if (this._thickness) {
                    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                        context.shadowBlur = 0;
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                    }

                    if (this.color) {
                        context.strokeStyle = this.color;
                    }
                    context.lineWidth = this._thickness;

                    if (this._cornerRadius) {
                        this._drawRoundedRect(context, this._thickness / 2);
                        context.stroke();
                    } else {
                        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2,
                            this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
                    }
                }

                context.restore();
            }
        }