表情字符计算/canvas绘制表情字符不会换行、多行文本绘制（原生canvas、pixi.js、createjs）

最新推荐文章于 2023-02-19 16:34:11 发布
最新推荐文章于 2023-02-19 16:34:11 发布
阅读量376 收藏
点赞数
分类专栏： # canvas 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27893011/article/details/125681765
版权

问题

  • 需求要求输入的表情只按一个字符算，但输入的表情默认是两个字符
  • 玩家输入的内容需要绘制到分享图上，可能会出现玩家输入表情字符的情况，但canvas不支持表情字符自动换行

DEMO(源码)

示例代码

表情字符计算

  • 相关方法：utils、calculationNum

canvas绘制多行文本（包含表情）

canvas文案绘制例子前置说明：

  • 因为原生canvas文本绘制跟pixi.js、createjs绘制有些许差别，因此三个类型都写了一个例子
  • 原生canvas不支持使用\n进行换行，pixi.js、createjs支持
  • 原生canvas文本不会自动换行
  • 原生canvas、pixi.js、createjs表情字符都不会自动换行
  • 原生canvas绘制多行文本
    1. 相关方法：utils、createCanvasTxt
    2. 计算思路：需要根据文本的宽度是否超出了显示区域的宽度，是的话，则另起一行进行绘制
  • createjs绘制多行文本
    1. 相关方法：utils、createCjsTxt
    2. 计算思路：需要根据文本的宽度是否超出了显示区域的宽度，是的话，拼接换行符
  • pixi.js绘制多行文本
    1. 相关方法：utils、createPixiTxt
    2. 计算思路：同createjs
BiyiHuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在 HTML canvas 绘制文本
lio-zero 的博客
09-08 954
绘制文本有两种方式： fillText(text, x, y) strokeText(text, x, y) 下面，我们来看看如何在 canvas 上绘制文本。 我们先创建一个 canvas 标签，并设置基本的宽高： <canvas width="200" height="400"></canvas> 首先，获取对画布的引用： const canvas = docume...
微信小程序绘制canvas文本过长时显示省略号
大把小米的博客
06-25 970
使用 wx.createCanvasContext()绘制文本时经常会遇到过长展示不下，这时候可以显示省略号 //canvas单行文本自动省略 fittingString(_ctx, str, maxWidth) { let strWidth = _ctx.measureText(str).width; const ellipsis = "…"; const ellipsisWidth = _ctx.measureText(ellipsis).width; if (str
canvas绘制一个常用的emoji表情
08-30
本文主要介绍了canvas绘制一个常用的emoji表情的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
前端游戏引擎CreateJS与PixiJS之比较
热门推荐
time1812的专栏
12-17 1万+
经过数年的发展演化，HTML 5 为基础的游戏引擎很多，本文将就其中两个著名的引擎CreateJS和PixiJS进行比较分析。对比了他们的API设计，功能，性能，工具支持，维护和开发几个方面。
【Canvas】canvas绘制emoji笑脸
Doxio的博客
06-28 1706
利用canvas绘制笑脸
canvas网络动画.zip
07-04
8. **动画库和框架**: 为了简化开发，有许多库和框架如GreenSock、CreateJS、Pixi.js等提供了更高级别的动画控制和图形管理，帮助开发者更高效地创建复杂的Canvas动画。 9. **物理模拟**: 有些Canvas动画涉及到物理...
html5 canvas消灭一大波僵尸小游戏源码下载
11-03
HTML5 Canvas的游戏开发往往结合其他技术，比如JavaScript库（如CreateJS、Pixi.js或Phaser）来简化绘图和动画处理。这些库提供了高级功能，如精灵表、物理引擎和动画系统，有助于快速开发游戏。不过，本游戏可能...
Canvas炫酷HTML5背景动画.zip
最新发布
11-17
9. **框架与库**：为了简化Canvas开发，有许多库和框架，如Three.js（用于WebGL），CreateJS或Pixi.js（2D动画库），它们提供高级功能并抽象出一些底层细节。 这个压缩包中的"index.html"很可能是展示Canvas动画的...
CloudKidOS:一个适用于 Pixi 或 CreateJS 的画布应用程序框架
07-13
Pixi.js是一个强大的2D渲染引擎，它支持WebGL和canvas两种渲染方式，为开发者提供了高性能的图形绘制能力。而CreateJS则是一套开源的JavaScript库集合，包括EaselJS、SoundJS、PreloadJS和TweenJS，分别用于2D图形、...
PIXI.js学习
07-27
Pixi是一款超快开源HTML5 2D渲染引擎，使用带有Canvas回调功能的WebGL。随着微信浏览器的完善，它的用途越来越广。但介绍pixi的专门的书真心不多，虽然是e文版，但配合彩图，看懂很容易
html5 canvas商品图片360度全视角效果
11-06
虽然可以直接使用Canvas API实现360度旋转，但使用现有的动画库或框架（如CreateJS、Pixi.js等）可以简化开发过程，提供更高级的功能，如缓动效果、时间轴管理和更好的性能优化。 总结来说，"html5 canvas商品图片...
小程序 canvas绘制多行文字多余的省略号表示
qq_41806475的博客
11-07 934
下面这个方法是返回有几行： /** * canvas绘图相关，把文字转化成只能行数，多余显示省略号 * ctx: 当前的canvas * text: 文本 * contentWidth: 文本最大宽度 * lineNumber: 显示几行 */ function transformContentToMultiLineText(ctx, text, contentWidth, lin...
关于字符串（包含表情）通过canvas转图片的一些坑
qq_33140311的博客
12-31 662
1. 文字转canvas的换行问题 /** 思路： * 利用canvas的measureText方法，在绘制字符串的过程中实时测量字符串内容是否超出canvas宽度， * 超出则重新绘制一行字符串 */ function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) { var ctx = canvas.getContext("2d"); var lineWidth = 0; var canvasWidth =
JS显示文本内容换行
weixin_43041350的博客
10-19 3543
当可向HTML文档中写入内容时，可以使用HTML的。
一起学 pixijs（4）：如何绘制文字md
fe_watermelon的博客
02-19 642
大家好，我是前端西瓜哥，今天我们来学 pixijs 如何绘制文字。pixijs 版本为 7.1.2。使用原生的 WebGL 来绘制文字是非常繁琐的，pixijs 对此进行了高层级的封装，提供了 Text 类和 BitMapText 类来绘制文字。
uniapp canvas文字换行和省略号
weixin_44570900的博客
09-23 1225
分享一个uniapp canvas在绘制过程中需要用到的问题 描述：文字超出换行并且超过多少行显示省略号 原文链接：https://segmentfault.com/a/1190000017869922 /** ctx： 画布的上下文环境 content： 需要绘制的文本内容 drawX： 绘制文本的x坐标 drawY： 绘制文本的y坐标 lineHeight：文本之间的行高 lineMaxWidth：每行文本的最大宽度 lineNum：最多绘制的行数 */ textPrewrap(ctx, content
EaselJS的Text中文不会自动换行的问题
yyf1990cs的博客
03-28 2654
一开始还没发现这个问题，只是在想为什么设了textWidth却无法换行。去官方找例子，都是好的，到我这里就不行了。 最后才想起来自己的文本都是汉字，别人的都是英文。你妈嗨，怪不得 原来默认是根据英文单词中间的空格来换的，汉字的情况就gg了。。。 修改easeljs的源文件，p._drawText方法如下 /** * Draws multiline text. * @method _
createjs php通信,Create.js实战-对文字的操作
weixin_29901515的博客
03-11 221
Text Class显示一行或多行动态文本(不是用户可编辑)在显示列表。线的包装支持(使用线宽)是非常基本的，只在空格和制表符。值得注意的是，作为一种替代文本，你可以定位HTML文本的上方或下方帆布相对于物品的使用显示列表localToGlobal方法或使用DOMElement.请注意，文本不支持HTML文本，并且一次只显示一个字体样式。要使用多个字体样式，您需要创建多个文本实例，并手动定...
android canvas 绘制文本 要求自动换行，文本内容包含0、6、9自动添加下划线
07-12
要实现带下划线的自动换行文本，您可以使用 `StaticLayout` 类。这个类可以帮助您实现多行文本的绘制，并且可以根据文本内容中包含的特定字符来添加下划线。下面是一个示例代码： ```java TextPaint textPaint = new TextPaint(); textPaint.setTextSize(50); String text = "1234567890"; float x = 100; float y = 200; int width = 500; // 文本宽度限制，超过这个宽度会自动换行 StaticLayout staticLayout = new StaticLayout(text, textPaint, width, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false); canvas.save(); canvas.translate(x, y); staticLayout.draw(canvas); canvas.restore(); // 添加下划线 for (int i = 0; i < text.length(); i++) { char c = text.charAt(i); if (c == '0' || c == '6' || c == '9') { int lineStart = staticLayout.getLineForOffset(i); int lineEnd = staticLayout.getLineForOffset(i + 1); float startX = staticLayout.getLineLeft(lineStart) + x; float endX = staticLayout.getLineRight(lineEnd) + x; float underlineY = y + staticLayout.getLineBaseline(lineStart) + textPaint.getFontMetrics().descent; canvas.drawLine(startX, underlineY, endX, underlineY, textPaint); } } ``` 在这个示例中，我们首先创建一个 `TextPaint` 对象，并设置文字大小为 50。然后，我们定义要绘制的文本内容和位置，以及文本的宽度限制。接下来，我们创建一个 `StaticLayout` 对象，通过传入文本、`TextPaint` 对象、宽度限制等参数来构建多行文本布局，并在画布上绘制出来。 最后，我们遍历文本中的每个字符，如果字符是 '0'、'6' 或 '9'，则根据字符所在的行信息，获取下划线的起始位置和结束位置，并使用 `canvas.drawLine` 方法绘制下划线。 请注意，这只是一个示例代码，您可以根据实际需求进行修改和优化。希望对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值