Fabricjs在Canvas上使用路徑Path繪制不規則圖形

場景

Fabricjs在Canvas上插入照片並設置縮小和翻轉屬性：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122859727

在上面的基礎上怎樣實現繪制不規則圖形

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、官方教程地址

http://fabricjs.com/fabric-intro-part-1#objects

 

 

2、使用路徑繪圖

用點和線的移動的方式進行繪圖。通過對 線、曲線、弧的應用繪制非常復雜的圖形。

在fabric.Path( )方法中，“M”代表“移動”命令，這個“M 00” 代表把畫筆移動到（0,0）點坐標。

“L”代表“線”，“L 200 100 ”的意思是使用鋼筆畫一條線，從（0,0）坐標畫到（200,100）坐標。 “z” 代表讓圖形閉合路徑。

畫好三角形后，我們可以用set( )方法對三角形的位置、顏色、角度、透明度等屬性進行設置。

具體代碼如下：

      var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
      path.set({ left: 120, top: 120,fill:'red' });
      canvas.add(path);

3、完整示例代碼

<template>
  <div>
    <div>
      <canvas id="c" width="800" height="800"></canvas>
    </div>
  </div>
</template>

<script>
import { fabric } from "fabric";
export default {
  name: "HelloFabric",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // create a wrapper around native canvas element (with id="c")
      // 聲明畫布
      var canvas = new fabric.Canvas("c");

      // create a rectangle object
      // 繪制圖形
      var rect = new fabric.Rect({
        left: 80, //距離畫布左側的距離，單位是像素
        top: 80, //距離畫布上邊的距離
        fill: "red", //填充的顏色
        width: 20, //方形的寬度
        height: 20, //方形的高度
      });

      // "add" rectangle onto canvas
      //添加圖形至畫布
      canvas.add(rect);

      //添加圖片
      fabric.Image.fromURL('images/light.png', function(oImg) {
        // scale image down, and flip it, before adding it onto canvas
        //縮小圖像並翻轉它
        oImg.scale(0.5).set('flipX', true);
        canvas.add(oImg);
      });


      //繪制不規則圖形
      var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
      path.set({ left: 120, top: 120,fill:'red' });
      canvas.add(path);
    },
  },
};
</script>