1. 画正方形
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画正方形
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
})
canvas.add(rect)
2. 画圆
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画圆
let circle = new fabric.Circle({
left: 100,
top: 100,
fill: 'green',
width: 20,
height: 20,
radius: 20
})
canvas.add(circle)
3. 画三角形
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画三角形
let triangle = new fabric.Triangle({
width: 20,
height: 30,
fill: 'blue',
left: 50,
top: 50
})
canvas.add(triangle)
4. 画椭圆
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画椭圆
let ellipse = new fabric.Ellipse({
rx: 20,
ry: 30,
left: 200,
top: 200,
fill: '#87ceed'
})
canvas.add(ellipse)
5. 画线
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画线
let line = new fabric.Line([70, 100, 150, 200], {
stroke: 'blue'
})
canvas.add(line)
6. 画多边形
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 画六边形
let hexagon = new fabric.Polygon(
[
{
x: 50,
y: 0
},
{
x: 25,
y: 43.3
},
{
x: -25,
y: 43.301
},
{
x: -50,
y: 0
},
{
x: -25,
y: -43.301
},
{
x: 25,
y: -43.301
}
],
{
stroke: 'red',
left: 0,
top: 0,
strokeWidth: 2,
strokeLineJoin: 'bevel'
}
)
canvas.add(hexagon)
7. 添加图片和过滤器
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 添加图片
let img = new Image()
img.src = 'src/views/Fabric/1.jpg'
img.addEventListener('load', () => {
const imgInstance = new fabric.FabricImage(img, {
// 设置图片位置和样子
left: 0,
top: 0,
angle: 0 // 设置图形顺时针旋转角度
})
// 添加过滤器
imgInstance.filters.push(new fabric.filters.Sepia())
// 应用过滤器并在完成后重新渲染画布
imgInstance.applyFilters()
canvas.add(imgInstance) // 加入到canvas中
})
canvas.add(img)
8. 添加文本和动画
javascript
复制代码
let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
// 添加文本
let text = new fabric.FabricText('hello world', { left: 100, top: 100 })
canvas.add(text)
let fn = (opt) => {
console.log(opt)
}
text.on('mousedown', fn)
text.animate(
{
left: 300,
top: 200,
fontSize: 48,
fill: 'blue'
},
{
duration: 2000, // 设置动画的持续时间为 2000 毫秒
onChange: canvas.renderAll.bind(canvas), // 在动画过程中更新 canvas
easing: fabric.util.ease.easeInQuad,
onComplete: () => {
console.log(1111)
}
}
)
canvas.add(text)