文本垂直布局,估计80%的人没玩过!

news/2024/5/19 19:54:29 标签: html, css, js, flex, javascript
htmledit_views">
js_content">

前言

最近韭菜长的不错,公众号也有点长草了,出来割一波。

割草

逛论坛看到这么一个需求,有人想要圣旨一样布局的文本。

问题

于是白玉无冰梭哈一下,写了一个简易的组件供在座的各位参考。

本字体组件支持(就是原本系统字组件Label的阉割版本) :

  • 系统字体

  • 空格,斜体,粗体

  • 字体大小、行高

但暂未支持字体资源,对齐模式,缓存模式,排版模式,下划线。(不过相信你看了这篇文章你自己也会扩展这些功能,不是白玉无冰懒????)

使用方法和效果预览如下:

使用方法和效果预览
调整属性

实现

实现这个组件的精髓在于借鉴抄,翻源码改造一下!

可能有些小伙伴不懂如何找源码,只需打开Cocos Creator编辑器,点击右上角的编辑器按钮就能找到了。

寻找源码

接着我们就参考label.ts中的源码,写一个组件继承他,修改他的assembler,指向我们写的。

继承

最后我们补上这个自定义的assembler,参考源码中的ttf.tsttfUtils

assembler源码

主要是修改这个节点的大小和计算每个字符的位置,稍微改改,很快就完成了。

修改大小计算
修改位置计算

小结

翻源码!查资料!借鉴!assembler!

以上为白玉无冰使用 Cocos Creator 3.0.0 实现 "文本从右向左竖直布局!" 的技术分享。欢迎三连(点赞/在看/留言/分享)支持!

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

与大佬交个朋友吧!


http://www.niftyadmin.cn/n/805572.html

相关文章

知方可补不足~Sqlserver中的几把锁和.net中的事务级别 回到目录

当数据表被事务锁定后,我们再进行select查询时,需要为with(锁选项)来查询信息,如果不加,select将会被阻塞,直到锁被释放,下面介绍几种SQL的锁选项 SQL的几把锁 NOLOCK&am…

ARM 微处理器及编程模式

计算机体系结构:冯/哈 冯诺依曼结构 核心思想: 将程序(指令序列的集合)和数据存放在同一存储器的不同地址; 顺序执行指令; 执行过程:取指令(or数据)→分析指令→执行指令。 哈佛结构 核心思…

项目打包jar发布部署到linux

mvn clean mvn package scp text.jar root192.168.23.111:/text/ 若之前有启动则kill掉:ps -ef|grep java | grep text (查看是否存在) kill -9 进程id java -jar text.jar :启动text项目,通过main方法启动 ctrlc 关闭项目 若想项…

一文手把手,教你 Creator 2.x 打包 Android APK(Windows篇)

官方文档:安装配置原生开发环境:https://docs.cocos.com/creator/manual/zh/publish/setup-native-development.html1安装JDK 下载下载地址:https://www.oracle.com/java/technologies/javase-jdk8-downloads.html选择 Windows x64&#xff1…

利用智能手机(Android)追踪一块磁铁(二)

在上一篇博客中提到了利用磁场强度推算传感器位置坐标的公式,下面就介绍怎么利用智能手机完成磁铁的追踪(任何具有磁感应器的装置均可以),这里主要是利用Android手机。 1:程序步骤: 首先将磁铁放置在远离手…

当当当羊毛又该剪了!限时三天!

囤书囤书我们一起阅读经典,紧跟前沿技术不掉队这次继续给爱读书的你们最大的优惠力度当当图书大促限时三天!每满100减50的基础上使用我给的优惠码99-10【或】199-30,相当于只要花90块就能买200的书/170买400的书!听说新版犀牛书上…

JavaScript闭包的一些理解

简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包…

maven install 自动安装源码包到本地库

方法一&#xff1a; 在pom.xml文件的根标签project下面添加下面配置&#xff1a; <build><plugins><!-- Source attach plugin --><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-source-plugin</arti…