本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。 fill: '#ddd', originX: 'center', // 旋转x轴:left, right, center originY: 'center' // 旋转y轴:top, bottom, center // 文本 const text = new fabric.Text('Hello World', { top: 40, left: 20, fontSize: 20, originX: "center", originY: "center" // 建组 const group = new fabric.Group([ellipse, text], { top: 50, // 整组距离顶部100 left: 100, // 整组距离左侧100 angle: -10, // 整组旋转-10deg canvas.add(group)
getObjects()       // 返回一组中所有对象的数组
size()             // 所有对象的数量
contains()         // 检查特定对象是否在 group 中
item()             // 组中元素
forEachObject()    // 遍历组中对象
add()              // 添加元素对象
remove()           // 删除元素对象
fabric.util.object.clone() // 克隆
// 控制第一个元素(椭圆)
group.item(0).set('fill', '#ea5455')
// 控制第二个元素(文本)
group.item(1).set({
    text: '雷猴,世界',
    fill: '#fff'
//    rom:允许指定可设置动画的属性的起始值(如果我们不希望使用当前值)。
//    duration:默认为500(ms)。可用于更改动画的持续时间。
//    onComplete:在动画结束时调用的回调。
//    easing:缓动功能。
          
// 请注意第二个参数:+=360
  rect.animate('angle', '+=360', {
    onChange:canvas.renderAll.bind(canvas), // 每次刷新的时候都会执行
    duration: 2000, // 执行时间
    easing: fabric.util.ease.easeOutBounce, // 缓冲效果
// 添加画布点击事件
canvas.on('mouse:down', options => {
    console.log(`x轴坐标: ${options.e.clientX}; y轴坐标: ${options.e.clientY}`)
// 移除画布点击事件
canvas.off('mouse:down')
canvas.freeDrawingBrush.width = 10
// 画笔投影
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
    blur: 10,
    offsetX: 10,
    offsetY: 10,
    affectStroke: true,
    color: '#30e3ca',