首页 > 其他分享 >JS_0075:判断方法是否含有参数,并做处理 hasOwnProperty

JS_0075:判断方法是否含有参数,并做处理 hasOwnProperty

时间:2023-03-13 16:44:06浏览次数:41  
标签:backgroundColor parameters JS let hasOwnProperty context borderThickness 0075

function makeTextSprite(message, parameters) {
                if (parameters === undefined) parameters = {}
                let fontface = parameters.hasOwnProperty("fontface") ?
                parameters["fontface"] : "Arial"
                /* 字体大小 */
                let fontsize = parameters.hasOwnProperty("fontsize") ?
                parameters["fontsize"] : 18
            
                let color = parameters.hasOwnProperty("color") ?
                parameters["color"]: 'rgba(0, 0, 0, 1.0)'
                /* 边框厚度 */
                let borderThickness = parameters.hasOwnProperty("borderThickness") ?
                parameters["borderThickness"] : 4
                /* 边框颜色 */
                let borderColor = parameters.hasOwnProperty("borderColor") ?
                parameters["borderColor"] : {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 1.0
                }
                /* 背景颜色 */
                let backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
                parameters["backgroundColor"] : {
                    r: 255,
                    g: 255,
                    b: 255,
                    a: 1.0
                }
                /* 创建画布 */
                let canvas = document.createElement('canvas');
                let context = canvas.getContext('2d')
                /* 字体加粗 */
                context.font = "Bold " + fontsize + "px " + fontface
                /* 获取文字的大小数据,高度取决于文字的大小 */
                let metrics = context.measureText(message);
                let textWidth = metrics.width
                /* 背景颜色 */
                context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," +
                backgroundColor.b + "," + backgroundColor.a + ")"
                /* 边框的颜色 */
                context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," +
                borderColor.b + "," + borderColor.a + ")";
                context.lineWidth = borderThickness
                /* 绘制圆角矩形 */
                roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 +
                borderThickness,
                6)
                /* 字体颜色 */
                context.fillStyle = color;
                context.fillText(message, borderThickness, fontsize + borderThickness)
                /* 画布内容用于纹理贴图 */
                let texture = new THREE.Texture(canvas);
                texture.needsUpdate = true
                let spriteMaterial = new THREE.SpriteMaterial({
                map: texture
                });
                let sprite = new THREE.Sprite(spriteMaterial)
                console.log(sprite.spriteMaterial)
                /* 缩放比例 */
                sprite.scale.set(10, 5, 0)
                return sprite
            };

  

标签:backgroundColor,parameters,JS,let,hasOwnProperty,context,borderThickness,0075
From: https://www.cnblogs.com/eliteboy/p/17211944.html

相关文章