绘制路径
// 绘制路径 const path = new fabric.Path('M 0 0 L 200 100 L 170 200 z') path.set({ top: 50, // 距离容器顶部距离 50px left: 50, // 距离容器左侧距离 50px fill: 'hotpink', // 填充 亮粉色 opacity: 0.5, // 不透明度 50% stroke: 'black', // 描边颜色 黑色 strokeWidth: 10 // 描边粗细 10px })
M：可以理解为新的起始点x，y坐标
L：每个折点的x，y坐标
z：自动闭合（自动把结束点和起始点连接起来）
文本
普通文本
const text = new fabric.Text('雷猴啊') • 1
可编辑文本
const itext = new fabric.IText('雷猴啊')
文本框
// 内容可编辑 const textbox = new fabric.Textbox('Lorum ipsum dolor sit amet', { width: 250 })
基础样式
图形常用样式
const circle = new fabric.Circle({ top: 100, left: 100, radius: 50, // 半径：50px backgroundColor: 'green', // 背景色：绿色 fill: 'orange', // 填充色：橙色 stroke: '#f6416c', // 边框颜色：粉色 strokeWidth: 5, // 边框粗细：5px 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, // 当对象活动和移动时，对象控制边界的不透明度 })
文本常用样式
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, // 当对象活动和移动时，对象控制边界的不透明度 })
const overline = new fabric.Text('文本', { top: 30, left: 10, fontSize: 20, overline: true, // 上划线 underline: true, // 下划线 linethrough: true, // 删除线 textAlign: 'left', // 左对齐 // textAlign: 'center',// 居中对齐 // textAlign: 'right', // 右对齐 lineHeight: 1, // 行高 fontStyle: 'italic', // 斜体 })
渐变
线性渐变
// 圆 let circle = new fabric.Circle({ left: 100, top: 100, radius: 50, }) // 线性渐变 let gradient = new fabric.Gradient({ type: 'linear', // linear or radial gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比 coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式 colorStops:[ // 定义渐变颜色的数组 { offset: 0, color: 'red' }, { offset: 0.2, color: 'orange' }, { offset: 0.4, color: 'yellow' }, { offset: 0.6, color: 'green' }, { offset: 0.8, color: 'blue' }, { offset: 1, color: 'purple' }, ] }) circle.set('fill', gradient);
径向渐变
let gradient = new fabric.Gradient({ type: 'radial', coords: { r1: 50, // 该属性仅径向渐变可用，外圆半径 r2: 0, // 该属性仅径向渐变可用，外圆半径 x1: 50, // 焦点的x坐标 y1: 50, // 焦点的y坐标 x2: 50, // 中心点的x坐标 y2: 50, // 中心点的y坐标 }, colorStops: [ { offset: 0, color: '#fee140' }, { offset: 1, color: '#fa709a' } ] })
使用图片
使用HTML的图片
const imgElement = document.getElementById('logo') let imgInstance = new fabric.Image(imgElement, { left: 100, top: 100, width: 200, height: 200, angle: 50, // 旋转 }) canvas.add(imgInstance)
使用js引入
fabric.Image.fromURL(imageUrl, image => { image.scale(0.5) // 缩放 canvas.add(image) // 将图片加入到画布 })
图片滤镜
单个滤镜
fabric.Image.fromURL(imageUrl, img => { img.scale(0.5) // 图片缩小50% img.left = 250 // 添加滤镜 img.filters.push(new fabric.Image.filters.Grayscale()) // 图片加载完成之后，应用滤镜效果 img.applyFilters() canvas.add(img) })
叠加滤镜
fabric.Image.fromURL(imageUrl, img => { img.scale(0.5) // 图片缩小50% // 添加滤镜 img.filters.push( new fabric.Image.filters.Grayscale(), new fabric.Image.filters.Sepia(), //色偏 new fabric.Image.filters.Brightness({ brightness: 0.2 }) //亮度 ) // 图片加载完成之后，应用滤镜效果 img.applyFilters() img.set({ left: 250, top: 250, }) canvas.add(img) })
fabric 内置滤镜
BaseFilter 基本过滤器 Blur 模糊 Brightness 亮度 ColorMatrix 颜色矩阵 Contrast 对比 Convolute 卷积 Gamma 伽玛 Grayscale 灰度 HueRotation 色调旋转 Invert 倒置 Noise 噪音 Pixelate 像素化 RemoveColor 移除颜色 Resize 调整大小 Saturation 饱和 Sepia 色偏
