Canvas库之争 fabric.js vs konva.js

前言

自从HTML5提供Canvas绘图技术，雨后春笋地出现很多Canvas库，Processing.js、Fabric.js、Two.js、Paper.js、EaselJS等等，琳琅满目不知如何选择；经过一番了解，发现fabric.js和konva.js功能强大，两者有很多相似之处；因此做一个详细的对比，协助我们选择。

框架起底

	fabric	konva
star	15.2k	4.7k
contributors	209	122
releases	103	116
Issues	210 Open 4213 Closed	54 Open 625 Closed
first commit	2010年6月10日	2012年5月4日
近2个月commit次数	24	28
库大小	未压缩922K 压缩295K	未压缩667K 压缩160K

fabric关注度更高
两个库维护情况良好
konva体积比fabric小45%

NPM下载量

fabric下载量最多，用户群体大
react-fabric惨不忍睹

相同点

支持绘制矩形、圆、椭圆、路径等图像
可以绘制图片，支持本地图片或者网络图片
具备完善事件模块，使用户可以在画布上发生交互
提供动画、滤镜、渐变、文本等能力
自带拖拽旋转功能

API使用

以绘制两个正方形加一条路径为例子，体验API的使用情况

fabric

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
    <canvas id="main"></canvas>
    <script>
        var canvas = new fabric.Canvas('main', {
            width: 1000,
            height: 1000
        })

        var rect = new fabric.Rect({
            left: 20,
            top: 20,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            width: 100,
            height: 50
        })

        canvas.add(rect)

        var rect2 = new fabric.Rect({
            left: 150,
            top: 40,
            width: 100,
            height: 50,
            fill: 'red',
            ry: 10
        })
        rect2.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)")
        canvas.add(rect2)

        var points = []
        points.push(new fabric.Point(5, 70))
        points.push(new fabric.Point(140, 23))
        points.push(new fabric.Point(250, 60))
        points.push(new fabric.Point(300, 20))

        var polyLine = new fabric.Polyline(points, {
            top: 100,
            stroke: 'black',
            stroke: 'green',
            strokeWidth: 2,
            strokeDashArray: [10]
        })
        canvas.add(polyLine)    
    </script>
</body>
</html>

konva

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }

        #container {
            width: 1000px;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        var width = window.innerWidth
        var height = window.innerHeight

        var stage = new Konva.Stage({
            container: 'container',
            width: 1000,
            height: 1000
        })

        var layer = new Konva.Layer()

        var rect1 = new Konva.Rect({
            x: 20,
            y: 20,
            width: 100,
            height: 50,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        })
        layer.add(rect1)

        var rect2 = new Konva.Rect({
            x: 150,
            y: 40,
            width: 100,
            height: 50,
            fill: 'red',
            shadowBlur: 10,
            cornerRadius: 10
        })
        layer.add(rect2)

        // dashed line
        var greenLine = new Konva.Line({
            y: 100,
            points: [5, 70, 140, 23, 250, 60, 300, 20],
            stroke: 'green',
            strokeWidth: 2,
            lineJoin: 'round',
            /*
            * line segments with a length of 33px
            * with a gap of 10px
            */
            dash: [33, 10]
        });
        layer.add(greenLine)

        stage.add(layer)
    </script>
</body>
</html>

在API使用方面，两者API调用方式一样
konva在设计上比fabric多了一层layer，相当于画布的功能，可以创建多个；接口命名更语义化；比如：stage、layer
konva的API设计更优，创建Rect和Line调用方式和参数保持一致

其他情况

移动端支持

两个库都支持移动端使用，touchstart、touchmove、touchend，konva还支持Mobile Scrolling

浏览器支持

fabric
- Firefox 2+
- Safari 3+
- Opera 9.64+
- Chrome（所有版本）
- IE10，IE11，Edge
konva
- Firefox 2+
- Safari 3+
- Opera 9.64+
- Chrome（所有版本）
- IE11 （Konva有些功能无法直接在IE11中使用。为了使它工作，你只需要提供一些polyfills如Array.prototype.find，String.prototype.trimLeft和String.prototype.trimRight等）

文档

在文档方面，konva碾压fabric；konva提供详细的教程还有常见应用场景的Demo，文档类目清晰，对开发者非常友好；konva还提供与流行JS框架结合版本，比如react-konva与vue-konva，开箱即用，非常舒服。

Typescript支持

fabric使用原生JS开发，GitHub仓库也没找到TS声明文件，应该不支持Typescript
konva使用Typescript开发，原生支持TS

总结

fabric发布比konva早，用户群庞大，老当益壮；konva则是后起之秀，

框架设计优秀，配套文档非常周全；而且拥抱新特性，使用Typescript开发代码质量更高；在功能上，两个库提供的能力非常相似，五五开的局面；在社区上，fabric用户群体更大，占据一些优势；在文档方面，fabric极其薄弱，案例demo少，konva则应有尽有,对开发者非常友好；konva还原生支持Typescript，在Typescript大行其道的今天无疑是个更好的选择。

Richar-Dada / notes