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)

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值