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

liuian 2024-12-18 15:35 109 浏览

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 上创建和编辑文本。

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

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

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

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