fabric.js 介绍IText

fabric.js是一个canvas的框架,可以快速的渲染文字,图片,线条,长方形,正方式,滤镜,动画等功能,下面就让我们来看看fabric.js怎么绘制一个可编辑的文字:
首先在html中创建一个canvas标签

<script src="https://cdn.bootcss.com/fabric.js/2.0.0-beta.7/fabric.min.js"></script>

<canvas id='myCanvas' width='300' height='200'></canvas>

<script>  
var canvas=new fabric.Canvas('myCanvas') 
var text=new fabric.IText('I'm in Comic Sanc',{
left:0,
top:0,
fill:'#000',
fontFamily: 'Comic Sans'
})
canvas.add(text)
</script>

到这里渲染文字就完成了,fabric.js绘制一个可编辑,拉伸,缩放,旋转,移动的文字就好了。

下面介绍文字的常用属性:
width: 文字的宽度
height: 文字的高度
top: 文字的顶边距离
left: 文字的左边距离
fill: 文字填充颜色
fontFamily: 字体
fontSize: 字体大小
scaleX: X缩放比例,默认为1
scaleY: Y缩放比例,默认为1
strokeWidth:  边框宽度
stroke: 边框颜色
textAlign: 对齐方式
textBackgroundColor:'',文字背景颜色
lineHeight: 行高
fontWeight: 文字粗细

初次写文章希望大家喜欢,也希望大家指点错误,也可以加入qq群439667347,大家一起讨论,一起进步,后续更新中...

fabric.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容