Fabricjs在Canvas上使用路径Path绘制不规则图形

迈不过友情╰ 2023-10-01 17:53 28阅读 0赞

## 场景 ##

Fabricjs在Canvas上插入照片并设置缩小和翻转属性：

[Fabricjs在Canvas上插入照片并设置缩小和翻转属性\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Fabricjs_Canvas_BADAO_LIUMANG_QIZHI_-CSDN]

在上面的基础上怎样实现绘制不规则图形

![c7101ddd857d4bec96a6028538af969c.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、官方教程地址

[Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library][Introduction to Fabric.js. Part 1. _ Fabric.js Javascript Canvas Library]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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>

[Fabricjs_Canvas_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122859727
[c7101ddd857d4bec96a6028538af969c.gif]: https://img-blog.csdnimg.cn/c7101ddd857d4bec96a6028538af969c.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[Introduction to Fabric.js. Part 1. _ Fabric.js Javascript Canvas Library]: http://fabricjs.com/fabric-intro-part-1#objects
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f15494db950f40a391524256934f8c12.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16