填充的种类 fill
>官方介绍 [Introduction to Fabric.js. Part 2.](http://fabricjs.com/fabric-intro-part-2#gradients "Introduction to Fabric.js. Part 2.")
颜色填充 Color
//投影
const fillColor = async function (text, options = {}) {
if (typeof text !== 'string' || text === '')
return null
const opt = {
top: 0, left: 0,
fill: '#000',
fontSize: 80,
fontFamily: '华文琥珀',
...options
}
new fabric.Text(text, opt)
}
渐变色填充 Gradient
const fillGradient = function (text, options = {}) {
const opt = { ...options }
const oText = new fabric.Text(text, opt)
const height = oText.calcTextHeight()
const width = oText.calcTextWidth()
const gradient = new fabric.Gradient({
type: 'linear', // or 'radial'
gradientUnits: 'pixels', // or 'percentage'
coords: {
// r1: 0, r2: 0, // type: 'radial' only have
x1: opt.left, y1: 0,
x2: opt.left, y2: height
},
colorStops: [
{ offset: 0, color: 'rgb(254, 35, 93)' },
{ offset: 1, color: 'rgb(255, 199, 102)' }
]
})
oText.set('fill', gradient)
return oText
}
图案填充 Pattern
> [js 完成对图片的等比例缩放的方法](https://my.oschina.net/u/4297117/blog/4527555 "js 完成对图片的等比例缩放的方法")
> [使用fabric.js缩放画布时,像素完美缩放图像(Pixel perfect scaling of images while zooming the canvas with fabric.js)](https://www.it1352.com/884313.html "使用fabric.js缩放画布时,像素完美缩放图像(Pixel perfect scaling of images while zooming the canvas with fabric.js)")
/** 返回Image对象 */
function asyncImage(src) {
console.log(src)
if (!src)
return null
return new Promise(resolve => {
const oImg = new Image()
// 解决跨域污染问题
oImg.crossOrigin = 'anonymous'
oImg.onerror = (res) => {
resolve(null);
console.error(res)
}
oImg.onload = () => {
resolve(oImg)
}
oImg.src = src
}
)
}
//图案填充
const asyncFillPattern = async function (text, options = {}) {
if (typeof text !== 'string' || text === '')
return null
const opt = {
top: 0, left: 0,
fill: '#000',
fontSize: 80,
fontFamily: '华文琥珀',
...options
}
const img = await asyncImage('data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC')
const pattern = new fabric.Pattern({
source: img, repeat: 'repeat'
})
return new fabric.Text(text, {
...opt,
fill: pattern
})
}