React项目中使用Fabric.js

介绍:

Fabric.js是一个强大且灵活的JavaScript HTML5 canvas库。它允许你通过一种友好且易于使用的方法创建和处理对象。以下是一些Fabric.js的主要特性:

  1. 对象模型:Fabric.js有一个丰富的对象模型,允许你创建和操作各种类型的对象,如矩形,圆形,多边形,椭圆,文本等。
  2. 可组合性:Fabric.js的对象可以组合在一起,以创建更复杂的图形。例如,你可以创建一个由多个矩形组成的矩形对象。
  3. 变换:Fabric.js提供了对对象进行变换(旋转,缩放,移动)的功能。此外,它还支持坐标系统转换。
  4. 事件:Fabric.js允许你侦听和响应各种事件,如对象创建,鼠标事件,触摸事件等。
  5. 动画:Fabric.js支持各种动画效果,包括简单动画和复杂动画。
  6. 交互:Fabric.js提供了强大的交互功能,允许你通过鼠标和触摸来操纵对象。
  7. 序列化与反序列化:Fabric.js的对象可以被序列化为JSON字符串,然后再从JSON字符串反序列化回来。
  8. HTML5 Canvas集成:Fabric.js可以直接与HTML5 Canvas元素集成,从而可以访问所有Canvas API的功能。

总的来说,Fabric.js是一个非常强大的库,用于创建和处理HTML5 canvas图形。它的友好性和易用性使得开发者可以快速上手并创建出复杂的图形和动画。

fabric官网:

Fabric.js Javascript Canvas Library

react中安装使用:

npm install fabric

创建画布:

javascript 复制代码
import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';

export default function App() {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);
  return (
    <div>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

创建图形:

javascript 复制代码
const rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'pink',
      width: 60,
      height: 60,
      strokeWidth: 5,
      hasControls: true,
      hasRotatingPoint: true,
      hasBorders: true,
      transparentCorners: true,
      perPixelTargetFind: true,
      selectable: true,
      lockMovementX: false,
      lockMovementY: false,
    });

    const circle = new fabric.Circle({
      left: 100,
      top: 100,
      fill: 'yellow',
      radius: 50,
    });
    newCanvas.add(circle);

导入图片:

javascript 复制代码
fabric.Image.fromURL('images/logo192.png', function (oImg) {
      // scale image down, and flip it, before adding it onto canvas
      //缩小图像并翻转它
      oImg.scale(0.5).set('flipX', true);
      newCanvas.add(oImg);
    });

全部代码:

javascript 复制代码
import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';

export default function App() {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);

  useEffect(() => {
    const newCanvas = new fabric.Canvas(canvasRef.current, {
      backgroundColor: '#fffffb',
      width: 768,
      height: 576,
    });

    setCanvas(newCanvas);

    const rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'pink',
      width: 60,
      height: 60,
      strokeWidth: 5,
      hasControls: true,
      hasRotatingPoint: true,
      hasBorders: true,
      transparentCorners: true,
      perPixelTargetFind: true,
      selectable: true,
      lockMovementX: false,
      lockMovementY: false,
    });

    const circle = new fabric.Circle({
      left: 100,
      top: 100,
      fill: 'yellow',
      radius: 50,
    });
    newCanvas.add(circle);
    newCanvas.add(rect);
    fabric.Image.fromURL('images/logo192.png', function (oImg) {
      // scale image down, and flip it, before adding it onto canvas
      //缩小图像并翻转它
      oImg.scale(0.5).set('flipX', true);
      newCanvas.add(oImg);
    });

    return () => {
      // newCanvas.dispose();
    };
  }, [canvasRef]);

  return (
    <div>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js