fabric.js 文本的基本属性以及文字的外描边,控制器去掉上下左右的拉伸点

关于Text,IText,Textbox的一些基本属性

width: 文字的宽度
height: 文字的高度
top: 文字的顶边距离
left: 文字的左边距离
fill: 文字填充颜色,也可以填充图片,使用pattern(可以去看文档,看不懂私聊我)
fontFamily: 字体
fontSize: 字体大小
scaleX: X缩放比例,默认为1
scaleY: Y缩放比例,默认为1
paintFirst: 先绘制描边还是填充,默认fill,先绘制填充添加的描边是内描边,修改stroke,将变成外描边
strokeWidth:  边框宽度
stroke: 边框颜色
textAlign: 对齐方式
textBackgroundColor:'',文字背景颜色
lineHeight: 行高
overline: 上划线
underline:下划线
padding: 内边距
fontStyle: 样式,值有:"normal", "italic" or "oblique",默认normal;
fontWeight: 文字粗细,
path: 文字整体的走向(新增的,我写文档的时候处于测试阶段);比如实现文字的环绕
angle: 旋转
shadow: 文字的阴影,值是new fabric.Shadow()
//已上是最近项目所用到的,还在研究文本的多重描边,更多内容下次更新

正常使用的暂时不做说明类似于:text,IText,rect..等等官网或者其他百度有很多,在这里讲一下一些属性以及方法

canvas.selections=false //设置全部元素不可选择
selectable:false, //禁止选中当前元素
hasBorders: false, //不显示选中时的边
hasControls:false, //不显示控制的那9个按钮

元素选中后有的需求不能横向或者纵向拉伸,就想使用顶点的按钮进行等比的缩放,这时候就需要把上下左右的四个点去掉,以下是方法

//选中框有9个点那么对应的就有9个值他们分别是:
//ml:左,mb:下,mr:右,mt:上,mtr:旋转,tl:左上角,bl:左下角,tr:右上角,br:右下角
//第一个参数就是值,第二个参数就是状态,false是隐藏,true显示,默认true    
//例如
var text = new fabric.IText('hello world', {
    left: canvas.width / 2, 
    top: canvas.height / 2,
    fontSize: 40,
    fontWeight: 'bold'
});
canvas.add(text).setActiveObject(text);

text['setControlVisible']('ml',false)
text['setControlVisible']('mb',false)
text['setControlVisible']('mr',false)
text['setControlVisible']('mt',false)

还有其他功能,等着下次补充

使用 `psd.js`(即 `@webtoon/psd`)库可以读取 Photoshop 文件(PSD 或 PSB)中的文本图层信息,包括文本描边属性。该库支持解析文本图层的样式信息,包括描边颜色、描边大小等关键属性。 在 `psd.js` 中,文本图层的描边信息通常包含在图层的 `style` 属性中。以下是一个从 PSD 文件中读取文本图层描边属性基本流程: 1. 加载并解析 PSD 文件 2. 遍历图层,筛选出文本图层 3. 提取文本样式中的描边信息 ### 示例代码 ```typescript import { PSDBitmap, PSDImage } from '@webtoon/psd'; async function parseTextStrokeInfo(psdArrayBuffer: ArrayBuffer) { const psd = await PSDImage.parse(psdArrayBuffer); function traverse(layer: any) { if (layer.isText) { const textLayer = layer as any; const textStyle = textLayer.style; if (textStyle && textStyle.stroke) { const stroke = textStyle.stroke; console.log(`图层名称: ${textLayer.name}`); console.log(`描边大小: ${stroke.size}`); console.log(`描边颜色: ${JSON.stringify(stroke.color)}`); console.log(`描边类型: ${stroke.type}`); } } if (layer.children) { for (const child of layer.children) { traverse(child); } } } traverse(psd); } ``` ### 说明 - `isText` 用于判断当前图层是否为文本图层。 - `textLayer.style.stroke` 包含了描边的相关信息,如 `size`(描边大小)、`color`(颜色)和 `type`(描边类型,例如“inside”、“outside”、“center”)。 - 此代码适用于现代浏览器和 Node.js 环境,前提是已正确安装并导入 `@webtoon/psd` 库。 ### Unity 中的注意事项 如果计划将解析出的描边信息用于 Unity(如 UGUI 或 TextMeshPro),需要注意的是 Unity 中的描边实现机制与 Photoshop 不同。Unity 通常通过复制文本并偏移来模拟描边效果,这种方法在性能和视觉效果上可能不如 Photoshop 原生描边。因此,对于描边大小大于 1 的文本图层,建议将其导出为图片以保证效果[^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值