fabric入门实战学习之图片剪切

“我正在参加「掘金·启航计划」”。

fabric真的是一个功能强大且简单易用的canvas工具，不仅提供可以自由交互的api以及灵活的动画api，而且即使你对canvas不甚了解，也可以快速学会如何使用fabric，绘制出你想要的东西。

实战内容（基础训练）

这次实战的内容是使用裁剪工具实现一副可以自由绘制的四格漫画，如下图：

实战前准备

下载fabricJs,创建一个index.html文件，引入fabricJs。script脚本中new一个fabric canvas实例。其他options配置见文档。

const canvas = new fabric.Canvas('canvas', { width: 440, height: 620 });

第一步：画方格

首先，我们要绘制漫画的格子，用到了多边形绘制api：

        const Comics = [
            [{ x: 20, y: 20 }, { x: 420, y: 20 }, { x: 420, y: 206 }, { x: 20, y: 305 }],
            [{ x: 20, y: 315 }, { x: 20, y: 600 }, { x: 215, y: 600 }, { x: 215, y: 266 }],
            [{ x: 225, y: 409 }, { x: 420, y: 409 }, { x: 420, y: 216 }, { x: 225, y: 266 }],
            [{ x: 225, y: 600 }, { x: 420, y: 600 }, { x: 420, y: 419 }, { x: 225, y: 419 }],
        ]; // 4个方格所在顶点组合
        const polygons = []; // polygon实例数组
        Comics.forEach(points => {
            const polygon = new fabric.Polygon(points, {
                fill: '#fff',
                hasControls: false, // 格子不能变形
                stroke: 'black',
                strokeWidth: 1,
                selectable: false, // 禁止选中格子
                absolutePositioned: true, // 这个是重点，否则剪切的位置会偏移【1】
            });
            polygons.push(polygon); // 保存polygon实例对象
            canvas.add(polygon); // 添加到canvas上
        });
        

属性absolutePositioned具体解释见文档。

生成的图片如下：

其中多边形格子是不可以选中和进行变形操作。

第二步添加图片

在页面上添加一张图片，图片可以移动、变形和旋转。

    fabric.Image.fromURL('./img/20220929101504.png', function (img) {
        img.scale(1).set({
            left: 0,
            top: 0,
        });
        canvas.add(img);
    })
    

对图片进行裁剪，把上面保存的polygons实例，设置为图片裁切的对象：

    fabric.Image.fromURL('./img/20220929101504.png', function (img) {
        img.scale(1).set({
            left: 0,
            top: 0,
            clipPath: polygons[0], // 裁剪对象是第一个多边形
        });
        canvas.add(img);
    })
    

如下图：

同理将其他图片放置到对应的格子里面，就形成了一副简单的四个漫画。

是不是感觉还挺容易的！下面是完整代码👇

最后，升级版进阶，可以尝试通过加入元素动画、背景、对话框等做成动漫效果。