Fabric.js——基础操作，矩形，圆，线，文字，组，图片，旋转缩放，滤镜等 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../fabric.js"></script>
</head>

<body>
  <img id="dog" src="./5678c3133aa8766011.jpg" width="0" />
  <canvas id="c" width="800" height="800"></canvas>
  <script>
    let canvas = new fabric.Canvas('c', {
      backgroundColor: '#fae7f2'
    })
    // canvas.setWidth(300);
    // canvas.setHeight(300)
    let rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: '#d0b0ee',
      width: 100,
      height: 100
    })
    canvas.add(rect)
    let circle = new fabric.Circle({
      left: 400,
      top: 100,
      radius: 50,
      fill: '#b1a5f0',
      originX: 'center',
      originY: 'center',
    })
    canvas.add(circle)
    let triangle = new fabric.Triangle({
      left: 400,
      top: 400,
      height: 100,
      width: 200,
      fill: '#ebc6c6'
    })
    let path = new fabric.Path('M 100 220 L 200 240 L 210 220 L 200 300 z', {
      fill: '#b7ebde'
    })
    canvas.add(path)
    let polygon = new fabric.Polygon(
      [
        { x: 200, y: 0 },
        { x: 250, y: 50 },
        { x: 250, y: 100 },
        { x: 150, y: 100 },
        { x: 150, y: 50 }
      ], {
        left: 200,
        top: 300,
        angle: 0,
        fill: '#f5f3d0'
      })
    canvas.add(polygon)
    let line = new fabric.Line([0, 20, 200, 20], {
      strokeWidth: 2,
      stroke: 'rgba(255, 0, 0, 0.8)',
      selectable: false
    })
    let text = new fabric.Text('颓废 沮丧', {
      left: 15
    })
    group = new fabric.Group([text, line])
    canvas.add(group)
    let image = document.getElementById('dog') // fabric.document.createElement('img')
    // image.src = "./5678c3133aa8766011.jpg"

    let imageBG = new fabric.Image(image, {
      left: 350,
      top: 350,
      width: 400,
      height: 400,
      angle: 0,
      opacity: 0.85
    })
    //  canvas.backgroundImage = imageBG
    //imageBG.excludeFromExport = true
    canvas.add(imageBG)
    //旋转+缩放
    fabric.Image.fromURL('5678c3133aa8766011.jpg', function(oImg) {
      oImg.scale(0.2).set('flipX', true)
      canvas.add(oImg)
    })
    //图片滤镜
    fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
      img.filters.push(new fabric.Image.filters.Grayscale());
      img.applyFilters();
      img.scale(0.2)
      canvas.add(img)
    }, { crossOrigin: 'annoymous' })
    //给滤镜加多个参数
    fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
      img.filters.push(
      　　new fabric.Image.filters.Sepia(),
     　　 new fabric.Image.filters.Brightness({ brightness: 100 })
　　　　);
      img.applyFilters();
      img.scale(0.2)
      canvas.add(img)
    }, { crossOrigin: 'anonymous' })
  </script>
</body>

</html>

1获取canvas

   let canvas = new fabric.Canvas('c', {   //c是canvas的id
      backgroundColor: '#fae7f2'
    })

2矩形

    let rect = new fabric.Rect({
      left: 100,  //起始位置
      top: 100,
      fill: '#d0b0ee',
      width: 100,  //宽高
      height: 100
    })
    canvas.add(rect) //添加到画布

3圆形

 let circle = new fabric.Circle({
      left: 400,
      top: 100,
      radius: 50,
      fill: '#b1a5f0',
      originX: 'center',
      originY: 'center',
    })
    canvas.add(circle)

4三角形

    let triangle = new fabric.Triangle({
      left: 400,
      top: 400,
      height: 100,
      width: 200,
      fill: '#ebc6c6'
    })
    canvas.add(triangle)

5路径（一直都是多边形，不知道什么情况）

let path = new fabric.Path('M 100 220 L 200 240 L 210 220 L 200 300 z', {
      fill: 'red'
    })
    canvas.add(path)

6多边形

let polygon = new fabric.Polygon(
      [
        { x: 200, y: 0 },
        { x: 250, y: 50 },
        { x: 250, y: 100 },
        { x: 150, y: 100 },
        { x: 150, y: 50 }
      ], {
        left: 200,
        top: 300,
        angle: 0,
        fill: '#f5f3d0'
      })
    canvas.add(polygon)

7线和文字 图形组

    let line = new fabric.Line([0, 20, 200, 20], {
      strokeWidth: 2,
      stroke: 'rgba(255, 0, 0, 0.8)',
      selectable: false
    })
    let text = new fabric.Text('颓废 沮丧', {
      left: 15
    })
    group = new fabric.Group([text, line])  //组
    canvas.add(group)

8图片

let image = document.getElementById('dog') // fabric.document.createElement('img')
    // image.src = "./5678c3133aa8766011.jpg"

    let imageBG = new fabric.Image(image, {
      left: 350,
      top: 350,
      width: 400,
      height: 400,
      angle: 0,
      opacity: 0.85
    })
    //  canvas.backgroundImage = imageBG
    //imageBG.excludeFromExport = true
    canvas.add(imageBG)

9图片旋转缩放

   //旋转+缩放
    fabric.Image.fromURL('5678c3133aa8766011.jpg', function(oImg) {
      oImg.scale(0.2).set('flipX', true)
      canvas.add(oImg)
    })

10滤镜

    //图片滤镜
    fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
      img.filters.push(new fabric.Image.filters.Grayscale());
      img.applyFilters();
      img.scale(0.2)
      canvas.add(img)
    }, { crossOrigin: 'annoymous' })
    //给滤镜加多个参数
    fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
      img.filters.push(
　　　　　 new fabric.Image.filters.Sepia(),
     　　 new fabric.Image.filters.Brightness({ brightness: 100 })
　　　　);
      img.applyFilters();
      img.scale(0.2)
      canvas.add(img)
    }, { crossOrigin: 'anonymous' })

 

posted @ 2022-03-30 14:03  聂小恶  阅读(2433)  评论(0)  编辑  收藏  举报