文章目录
前言
本篇文章将介绍Fabric的图形绘制，会介绍常见的图形绘制方法
提示：以下是本篇文章正文内容，下面案例可供参考
一、基础图形绘制
1.矩形 Rect
上一篇文章的实例中已经介绍了矩形的绘制，这里会详细说明：
// 创建一个长方形
const rect = new fabric.Rect({
top: 30, // 距离容器顶部 30px
left: 30, // 距离容器左侧 30px
width: 100, // 宽 100px
height: 60, // 高 60px
fill: 'red', // 填充 红色
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5 //线条宽度
rx: 20, // x轴的半径【圆角】
ry: 20 // y轴的半径【圆角】
})
// 在canvas画布中加入矩形（rect）。add是“添加”的意思
this.canvas.add(rect)
绘制出的矩形如下：
上面的是没有加圆角的矩形，下面是加了圆角的矩形
参数设置：参数设置可以在创建图形的时候，直接设置，如下：
// 创建一个长方形
const rect = new fabric.Rect({
width: 100, // 宽 100px
height: 60, // 高 60px
})
也可以创建图形之后，在进行参数设置，如下：
// 创建矩形
let rect = new fabric.Rect()
rect.width = 60 // 设置矩形宽度
rect.height = 40 // 设置矩形高度
1.1宽高 设置
// 创建矩形
let rect = new fabric.Rect()
rect.width = 60 // 设置矩形宽度
rect.height = 40 // 设置矩形高度
1.2位置 设置
使用 top 设置矩形上边距离画布顶部的距离；使用 left 设置矩形左边距离画布左侧的距离。
如果想修改相对于矩形的参考线，可以通过 originX 和 originY 进行配置。
originX 可选值：‘left’, ‘right’, ‘center’。默认值是 ‘left’。
originY 可选值：‘top’, ‘bottom’, ‘center’。默认值是 ‘top’。
// 创建矩形
let rect = new fabric.Rect()
rect.top= 60 // 设置矩形宽度
rect.left= 40 // 设置矩形高度
1.3填充色 设置
// 创建矩形
let rect = new fabric.Rect()
rect.fill= 60
1.4描边颜色 设置
// 创建矩形
let rect = new fabric.Rect()
rect.stroke= 60
1.4边框宽度 设置
// 创建矩形
let rect = new fabric.Rect()
rect.strokeWidth = 60
1.5固定边框宽度 设置
如果你希望不管怎么缩放矩形，边框的宽度都是固定不变的话，可以将矩形的 strokeUniform 属性设置为 true。
// 创建矩形
let rect = new fabric.Rect()
strokeUniform: true // 固定边框宽度
1.6虚线边框 设置
默认是实线
// 10px实线, 10px虚线, 10px实线, 10px虚线……
strokeDashArray: [10]
// 10px实线, 20px虚线, 10px实线, 20px虚线……
strokeDashArray: [10, 20]
// 10px实线, 20px虚线, 30px实线, 10px虚线, 20px实线, 30px虚线……
strokeDashArray: [10, 20, 30]
1.7边框起点偏移量 设置
边框的起点默认在矩形的左上角。
如果你想逆时针偏移，可以给 strokeDashOffset 属性设置一个正数；如果想顺时针偏移，可以设置负数。
strokeDashOffset: 4 // 逆时针偏移
strokeDashOffset: -4 // 顺时针偏移
1.8圆角 设置
如果只是设置了 rx，那么 ry 会取 rx 的值，反过来也一样。
如果矩形的正方形，且 rx 和 ry 是 width 和 height 的一半，此时会显示圆形。
rx: 10,
ry: 20
1.9旋转 设置
angle: 10 // 旋转10度
1.10翻转 设置
将 flipX 设置为 true 可以将矩形进行水平翻转。
将 flipY 设置为 true 可以将矩形进行垂直翻转。
flipX: true // 水平翻转
flipY: true // 垂直翻转
2.圆形 Circle
// 创建一个圆形
const circle = new fabric.Circle({
top: 100, // 距离容器顶部距离
left: 200, // 距离容器左侧距离
radius: 30, // 圆的半径 50
fill: 'green', //填充
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
// 在canvas画布中加入圆形（circle）
this.canvas.add(circle)
绘制出的图形如下：
上面的是没有加边框线条，下面是加了边框线条的
其他常用属性和 矩形 rect 差不多，可参考矩形的属性设置
3.椭圆 Ellipse
// 创建一个椭圆形
const ellipse = new fabric.Ellipse({
top: 100,
left: 300,
rx: 70,
ry: 30,
fill: 'hotpink',
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
this.canvas.add(ellipse)
和圆形不同，椭圆不需要设置 radius ，但要设置 rx 和 ry。
当 rx > ry ：椭圆是横着的
当 rx < ry：椭圆是竖着的
当 rx = ry： 看上去就是个圆形
绘制出的图形如下：
其他常用属性和 矩形 rect 差不多，可参考矩形的属性设置
4.三角形 Triangle
// 创建一个三角形
const triangle = new fabric.Triangle({
top: 100,
left: 500,
width: 50, // 底边长度
height: 60, // 底边到对角的距离
fill: 'hotpink',
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
this.canvas.add(triangle)
使用 new fabric.Triangle 创建三角形，三角形是需要给定 “底和高” 的，即width和height。
绘制出的图形如下：
其他常用属性和 矩形 rect 差不多，可参考矩形的属性设置
5.线段 Line
// 创建一个线段
const line = new fabric.Line(
[
600, 90, // 起始点坐标
700, 150 // 结束点坐标
],
{
stroke: 'red', // 笔触颜色
strokeWidth: 5, //线条宽度
}
)
this.canvas.add(line)
第一个参数是 数组 ，数组需要传4个值，前2个值是起始坐标的x和y，后2个值是结束坐标的x和y。
绘制出的图形如下：
6.折线 Polyline
// 折线
let polyline = new fabric.Polyline([
{x: 700, y: 30},
{x: 850, y: 100},
{x: 720, y: 100},
{x: 800, y: 30}
], {
fill: 'transparent', // 如果画折线，需要填充透明
stroke: '#6639a6', // 线段颜色：紫色
strokeWidth: 5 // 线段粗细 5
})
this.canvas.add(polyline)
Polyline() 方法接收2个参数，第一个参数是折现的坐标集合；第二个参数是描述折现属性的对象。
坐标集合是一个元素为对象的数组，每个子元素都需要提供 x 和 y 坐标
绘制出的图形如下：
7.多边形 Polygon
// 多边形
let polygon = new fabric.Polygon([
{x: 930, y: 30},
{x: 1050, y: 100},
{x: 980, y: 100},
{x: 1000, y: 30}
], {
fill: '#ffd3b6', // 填充色
stroke: '#6639a6', // 线段颜色：紫色
strokeWidth: 5 // 线段粗细 5
})
this.canvas.add(polygon)
Polygon() 会自动将结束点和起点连接起来，形成一个闭合图形
绘制出的图形如下：
8.路径 Path
// 创建路径
let path = new fabric.Path('M 20 220 L 100 280 L 70 300 z')
path.set({
fill: 'hotpink', // 填充 亮粉色
stroke: 'black', // 描边颜色 黑色
})
this.canvas.add(path)
在 fabric.js 中创建路径使用 fabric.Path() 方法。里面传入一个字符类型的参数。 M 代表起点，L 代表节点。
绘制出的图形如下：
二、文本绘制
1.普通文本
// 创建文本
const text = new fabric.Text('欢迎')
text.top=400
text.left=10
this.canvas.add(text)
同样用于基础图形的一些属性可以用于文本中
绘制出的图形如下：
2.可编辑文本
// 创建可编辑文本
const Itext = new fabric.IText('可编辑')
Itext.top=400
Itext.left=10
this.canvas.add(Itext)
绘制出的图形如下：
3.多行文本
// 创建多行文本
let textx = new fabric.Textbox('Lorum ipsum dolor sit amet', {
width: 200,
top:200,
left:600
})
this.canvas.add(textx)
绘制出的图形如下：
三、图片绘制
1.HTML中的图片绘制
如果图片已经是页面中的 元素，fabric.js 可以将其加入到画布里
let self = this
// 获取页面中的图片元素
const catImg = document.getElementById('catImg')
// 等待图片加载完
catImg.onload = function() {
// 创建 fabric 图片元素
let imgInstance = new fabric.Image(catImg, {
top: 100,
left: 900,
width: 200,
height: 200,
angle: 20
})
self.canvas.add(imgInstance)
}
绘制出的图形如下：
2.外部图片引入绘制
// 加载图片2
fabric.Image.fromURL(
'3f7d920fb4e05f7a44bbc56135fb0e3e.png', // 图片路径
img => {
img.top = 150
img.left = 1000
img.scale(0.2) // 缩放
this.canvas.add(img) // 将图片插入到画布中
}
)
注意：图片需要放置在public文件夹下，且图片的路径是从public这个路径开始的
绘制出的图形如下：
完整代码
<template>
<div class="hello">
<!-- 画布元素 -->
<canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>
<img src="../assets/logo.png" id="catImg" alt="">
</div>
</template>
<script>
import { fabric } from 'fabric'
export default {
name: 'HelloWorld',
data() {
return {
}
},
mounted(){
this.init()
},
methods:{
init(){
this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id
// 创建一个长方形
const rect = new fabric.Rect({
top: 100, // 距离容器顶部距离
left: 30, // 距离容器左侧距离
width: 100, // 宽 100px
height: 60, // 高 60px
fill: 'red', // 填充 红色
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
rx: 20, // x轴的半径【圆角】
ry: 20 // y轴的半径【圆角】
})
// 在canvas画布中加入矩形（rect）。add是“添加”的意思
this.canvas.add(rect)
// 创建一个圆形
const circle = new fabric.Circle({
top: 100, // 距离容器顶部距离
left: 200, // 距离容器左侧距离
radius: 30, // 圆的半径 50
fill: 'green', //填充
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
// 在canvas画布中加入圆形（circle）
this.canvas.add(circle)
// 创建一个椭圆形
const ellipse = new fabric.Ellipse({
top: 100,
left: 300,
rx: 70,
ry: 30,
fill: 'hotpink',
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
this.canvas.add(ellipse)
// 创建一个三角形
const triangle = new fabric.Triangle({
top: 100,
left: 500,
width: 50, // 底边长度
height: 60, // 底边到对角的距离
fill: 'hotpink',
stroke: 'blue', //线条颜色 蓝色
strokeWidth: 5, //线条宽度
})
this.canvas.add(triangle)
// 创建一个线段
const line = new fabric.Line(
[
600, 90, // 起始点坐标
700, 150 // 结束点坐标
],
{
stroke: 'red', // 笔触颜色
strokeWidth: 5, //线条宽度
}
)
this.canvas.add(line)
// 折线
let polyline = new fabric.Polyline([
{x: 700, y: 30},
{x: 850, y: 100},
{x: 720, y: 100},
{x: 800, y: 30}
], {
fill: 'transparent', // 如果画折线，需要填充透明
stroke: '#6639a6', // 线段颜色：紫色
strokeWidth: 5 // 线段粗细 5
})
this.canvas.add(polyline)
// 多边形
let polygon = new fabric.Polygon([
{x: 930, y: 30},
{x: 1050, y: 100},
{x: 980, y: 100},
{x: 1000, y: 30}
], {
fill: '#ffd3b6', // 填充色
stroke: '#6639a6', // 线段颜色：紫色
strokeWidth: 5 // 线段粗细 5
})
this.canvas.add(polygon)
// 创建路径
let path = new fabric.Path('M 20 220 L 100 280 L 70 300 z')
path.set({
fill: 'hotpink', // 填充 亮粉色
stroke: 'black', // 描边颜色 黑色
})
this.canvas.add(path)
// 创建文本
const text = new fabric.Text('欢迎')
text.top=400
text.left=10
this.canvas.add(text)
// 创建可编辑文本
const Itext = new fabric.IText('可编辑')
Itext.top=400
Itext.left=300
this.canvas.add(Itext)
// 创建多行文本
let textx = new fabric.Textbox('Lorum ipsum dolor sit amet', {
width: 200,
top:200,
left:600
})
this.canvas.add(textx)
//加载图片1
let self = this
// 获取页面中的图片元素
const catImg = document.getElementById('catImg')
// 等待图片加载完
catImg.onload = function() {
// 创建 fabric 图片元素
let imgInstance = new fabric.Image(catImg, {
top: 100,
left: 900,
width: 200,
height: 200,
angle: 20
})
self.canvas.add(imgInstance)
}
// 加载图片2
fabric.Image.fromURL(
'3f7d920fb4e05f7a44bbc56135fb0e3e.png', // 图片路径
img => {
img.top = 150
img.left = 1000
img.scale(0.2) // 缩放
this.canvas.add(img) // 将图片插入到画布中
}
)
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
align-items:center;
}
</style>
总结
本章内容主要是介绍fabric中如何绘制各种各样的图形，并对图形进行基础的属性设置，下一章会继续进行其它介绍
扫一扫
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
