Fabric.js 文本常用样式

🎁 本节案例预览 - 文本样式

🎁 本节代码仓库

<template>
 <canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
​
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
​
function init() {
 const canvas = new fabric.Canvas('canvas')
​
 const text = new fabric.Text('雷猴', {
 top: 40,
 left: 40,
 fontSize: 120,
 backgroundColor: 'green', // 背景色：绿色
 fill: 'orange', // 填充色：橙色
 stroke: '#f6416c', // 边框颜色：粉色
 strokeWidth: 3, // 边框粗细：3px
 strokeDashArray: [20, 5, 14], // 边框虚线规则：填充20px 空5px 填充14px 空20px 填充5px ……
 shadow: '10px 20px 6px rgba(10, 20, 30, 0.4)', // 投影：向右偏移10px，向下偏移20px，羽化6px，投影颜色及透明度
 transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
 borderColor: '#16f1fc', // 选中时，边框颜色：天蓝
 borderScaleFactor: 5, // 选中时，边的粗细：5px
 borderDashArray: [20, 5, 10, 7], // 选中时，虚线边的规则
 cornerColor: "#a1de93", // 选中时，角的颜色是 青色
 cornerStrokeColor: 'pink', // 选中时，角的边框的颜色是 粉色
 cornerStyle: 'circle', // 选中时，叫的属性。默认rect 矩形；circle 圆形
 cornerSize: 20, // 选中时，角的大小为20
 cornerDashArray: [10, 2, 6], // 选中时，虚线角的规则
 selectionBackgroundColor: '#7f1300', // 选中时，选框的背景色：朱红
 padding: 40, // 选中时，选择框离元素的内边距：40px
 borderOpacityWhenMoving: 0.6, // 当对象活动和移动时，对象控制边界的不透明度
 })
​
 canvas.add(text)
}
​
onMounted(() => {
 init()
})
</script>

除此之外，还可以配置 上划线 、下划线 、删除线 、左对齐 、 右对齐 、 居中对齐 、 行距 等。

<template>
 <canvas width="600" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
​
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
​
function init() {
 const canvas = new fabric.Canvas('canvas')
​
 // 上划线
 const overline = new fabric.Text('上划线', {
 top: 30,
 left: 10,
 fontSize: 20,
 overline: true, // 上划线
 })
​
 // 下划线
 const underline = new fabric.Text('下划线', {
 top: 30,
 left: 100,
 fontSize: 20,
 underline: true, // 下划线
 })
​
 // 删除线
 const linethrough = new fabric.Text('删除线', {
 top: 30,
 left: 200,
 fontSize: 20,
 linethrough: true, // 删除线
 })
​
 // 左对齐
 const msg1 = '左\n左左\n左对齐'
 const left = new fabric.Text(msg1, {
 top: 100,
 left: 10,
 fontSize: 16,
 textAlign: 'left', // 左对齐
 })
​
 // 居中对齐
 const msg2 = '中\n中中\n居中对齐'
 const center = new fabric.Text(msg2, {
 top: 100,
 left: 100,
 fontSize: 16,
 textAlign: 'center',// 居中对齐
 })
​
 // 右对齐
 const msg3 = '右\n右右\n右对齐'
 const right = new fabric.Text(msg3, {
 top: 100,
 left: 200,
 fontSize: 16,
 textAlign: 'right', // 右对齐
 })
​
 // 文本内容
 const msg4 = "Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod tempor incididunt\nut labo"

 const lineHeight1 = new fabric.Text(msg4, {
 top: 250,
 left: 10,
 fontSize: 16,
 lineHeight: 1, // 行高
 })
​
 const lineHeight2 = new fabric.Text(msg4, {
 top: 250,
 left: 300,
 fontSize: 16,
 lineHeight: 2, // 行高
 })
​
 canvas.add(
 overline,
 underline,
 linethrough,
 left,
 center,
 right,
 lineHeight1,
 lineHeight2
 )
​
}
​
onMounted(() => {
 init()
})
</script>

上面的上划线、下划线、删除线的配置，可以同时使用。

本作品采用《CC 协议》，转载必须注明作者和本文链接