美文网首页
文本生成图片,用于动态文字作为模型贴图

文本生成图片,用于动态文字作为模型贴图

作者: 王清水 | 来源:发表于2022-10-13 14:14 被阅读0次

可复制:

// 创建文本图片// 支持 文字设置大小 字体 颜色 是否3D显示// 支持 图片透明度 文字所处图片位置 最小图片设置等function createTextCanvas(    text,     fontOptions = {font: "20px sans-serif", color: "red", backgroud: "rgba(255, 255, 255, 0.1)"},     minImgWidht = null,     paddingOptions = {top: 100, right: 0, bottom: 0, left: 20},    is3D = true) {        // 创建画布        let canvas = document.createElement('canvas');        // 绘制文字环境        let context = canvas.getContext('2d');        // 设置字体        context.font = fontOptions.font;                // 获取字体宽度        let width = context.measureText(text).width;        if(typeof(minImgWidht) == 'number' && width < minImgWidht) {            width = minImgWidht;        }        width += paddingOptions.left + paddingOptions.right;        // 获取字体高度        let height = context.measureText(text).fontBoundingBoxAscent             + context.measureText(text).fontBoundingBoxDescent            + paddingOptions.top + paddingOptions.bottom;        // 画布宽度        canvas.width = width;        // 画布高度        canvas.height = height;        // 填充背景        context.fillStyle = fontOptions.backgroud;        // 绘制背景大小        context.fillRect(0, 0, canvas.width, canvas.height);        // 设置字体        context.font = fontOptions.font;        // 设置字体颜色        context.fillStyle = fontOptions.color;        if(is3D) {            var n;            //绘制底层            for (n=0; n<2; n++)            {                context.fillText(text,Math.abs(paddingOptions.left)-n,Math.abs(parseInt(fontOptions.font) + paddingOptions.top)-n);            }            context.shadowColor="black";            context.shadowBlur=1;            context.shadowOffsetX=1;            context.shadowOffsetY=0;        }                // 没有填写坐标则默认居中输出        if(paddingOptions.top == 0             && paddingOptions.right == 0             &&  paddingOptions.bottom == 0             && paddingOptions.left == 0) {            // 设置水平对齐方式            context.textAlign = 'center';            // 设置垂直对齐方式            context.textBaseline = 'middle';            // 填充文字(参数:要写的字,x坐标,y坐标)            context.fillText(text, canvas.width/2, canvas.height/2);        }        else {            // 填充文字(参数:要写的字,x坐标,y坐标)            context.fillText(text, Math.abs(paddingOptions.left),                 Math.abs(parseInt(fontOptions.font) + paddingOptions.top));        }        // 生成图片信息        // return canvas.toDataURL('image/png'); // 图资源        return canvas; // canvas资源}

相关文章

  • 文本生成图片,用于动态文字作为模型贴图

    可复制: // 创建文本图片// 支持 文字设置大小 字体 颜色 是否3D显示// 支持 图片透明度 文字所处图片...

  • 批注元素清晰度优化

    1. 存在的问题在做为批注图片添加贴图和文字的需求时,发生批注之后生成的图片,当原图尺寸比较大时,贴图,文字,画笔...

  • Kingdom-water

    基本思路:根据环境(风,光,基础运动)动态生成一张置换贴图用于倒影变化 Flash版本关键代码如下:声明置换滤镜 ...

  • 游戏建模学习之3D建模烘焙贴图介绍——贴图的基础知识

    烘焙贴图,其实就是将模型与模型之间的光影关系通过图片的形式转换出来,这样就形成了一种贴图,将这种贴图控制在模型上,...

  • linux服务器下添加字体

    这两天在开发一个动态生成海报的东西(图片拼接,图片水印),开发在windows下没有问题,图片和文字都能正常的生成...

  • [Topic Model]LDA (Latent Dirich

    模型 用途:可以用于文本聚类。 特点 :是一个生成模型,是概率图模型,属于贝叶斯学派将模型参数看成是一个分布,而不...

  • 用深度学习模型提取特征

    用途 有时候需要从图片(或文本)中提取出数值型特征,供各种模型使用。深度学习模型不仅可以用于分类回归,还能用于提取...

  • FastAI03-模型投入生成环境

    FastAI模型在训练完成之后,需要投入到生成环境中,用于新图片的预测。 1. 模型的保存和加载 模型的导出可以使...

  • iOS 图文混排

    创建label 创建富文本 创建图片文本 富文本添加图片 图片和文字居中对齐 图片文本加入富文本中 图片插入文本中...

  • 易效能时间管理 -纸质资料电子化20180331 88/100

    扫描全能王:快速扫描、快速生成高清pdf,还可将图片文字提取成text文本文档。

网友评论

      本文标题:文本生成图片,用于动态文字作为模型贴图

      本文链接:https://www.haomeiwen.com/subject/rksfzrtx.html