交互式 canvas 图形绘制库 交互式图片展示

Fabric.js 是一个强大的 JavaScript 库，用于在 web 页面上创建丰富的图形和交互式 canvas 元素。它提供了一个简洁的 API，使得开发者可以轻松地在 HTML5 canvas 元素上工作，实现复杂的图形操作和动画效果。

演示示例：

示例代码：

// npm
npm install fabric --save
// use
const canvas = new fabric.Canvas(canvasEl);
const demoImg = 'https://xxx/pug.jpg';
let radius = 300;
fabric.Image.fromURL(demoImg).then((img) => {
  img.set({
    dirty: true,
    scaleX: 0.5,
    scaleY: 0.5,
    left: 100,
    top: 100,
    angle: -15,
    clipPath: new fabric.Circle({
      objectCaching: false,
      radius: radius,
      originX: 'center',
      originY: 'center',
    }),
  });
  function animate() {
    fabric.util.animate({
      startValue: Math.round(radius) === 50 ? 50 : 300,
      endValue: Math.round(radius) === 50 ? 300 : 50,
      duration: 1000,
      onChange: (value) => {
        radius = value;
        img.clipPath.set('radius', value);
         img.set('dirty', true);
        canvas.renderAll();
      },
      onComplete: animate,
    });
  }
  animate();
  canvas.add(img);
  canvas.setActiveObject(img);
});

API 文档：

使用场景：

Fabric.js 适用于创建图形编辑器、游戏、数据可视化、图形界面设计工具等多种应用场景。由于其灵活性和强大的功能，Fabric.js 成为了许多前端开发者和设计师的首选库之一。

功能和特性：

Canvas 操作：允许开发者在 canvas 上绘制各种形状、路径和图像。

图形和形状：支持绘制矩形、圆形、三角形、多边形、曲线等基本图形，以及自定义路径。

图像处理：可以加载和操作图像，包括缩放、旋转、倾斜和裁剪。

文本渲染：提供文本工具，允许在 canvas 上创建和编辑文本。

层和对象管理：管理多个图形层，可以对每个层进行单独操作，如移动、缩放和删除。

事件处理：支持鼠标和触摸事件，可以捕捉和响应用户的交互行为。

动画：可以创建动画效果，包括帧动画和过渡动画。

对象转换：提供对象的克隆、复制和粘贴功能。

保存和导入：支持将 canvas 上的图形导出为 JSON 格式，并从 JSON 格式导入图形。

集成性：可以轻松集成到现有的 web 应用中，与其他 JavaScript 库和框架一起工作。

性能：优化了性能，适合处理复杂的图形和动画。

跨浏览器支持：支持所有现代浏览器，包括移动端。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/fabricjs/fabric.js/

官方文档：https://fabricjs.com/

中文文档：http://fabricjs.cc/