Fabric.js——基礎操作，矩形，圓，線，文字，組，圖片，旋轉縮放，濾鏡等

本文轉載自查看原文 2022-03-30 14:03 1537 Fabricjs

<!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' })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 fabric.js 限制縮放的最大最小比例 fabric.js Tkinter canvas-繪制線、矩形、文字、橢圓、圓、多邊形 Fabric.js canvas 圖形庫 fabric.js 知識點整理 WPF將圖片旋轉縮放 fabric.js阻止對象移動到畫布外 fabric.js點擊按鈕放大縮小畫布以及畫布內容 Js圖片縮放代碼鼠標滾輪放大縮小圖片向右旋轉 IE8 下面通過濾鏡的方式進行圖片旋轉