如何同时使用 fabric.js 和 paper.js 来制作绘图应用程序？

Question

我想制作一个绘图应用程序，但我无法获得平移图层或编辑 svgs 和缩放、变换的基本功能。

使用 paper.js 可以轻松调整 canvas 的大小并适合 div 但我需要 fabric.js 来移动和缩放对象。面料未调整大小或适合 div.

在 html 我有这个：<canvas id="canvas" resize></canvas>

和css：

#canvas {

  width: 100%;
  height: 100%;
  background-color: transparent;
}

使用此代码，我可以调整 window 和 canvas 的大小。

但是当我使用 fabric.js 时，它会回到 300 x 150 并且不会调整大小：

   var fabric = require('fabric').fabric;
    canvas = new fabric.Canvas('canvas');

    paper.install(window);
    window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('canvas');
    var path = new Path();
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([ 200, -50 ]));
    view.draw();
   }

Answer 1

我不认为将 fabric.js 与 paper.js 一起使用是个好主意，因为它们可能存在一些冲突点。
如果您 fabric.js 缺乏调整 canvas 大小的能力，这里有一个 fiddle 演示您可以如何做。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.js"></script>
    <style>
        body {
            margin : 0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>

    // Init Fabric.js canvas
    var canvas = new fabric.Canvas('canvas');

    // Draw rectangle
    canvas.add(new fabric.Rect({
        left: 200,
        top: 200,
        width: 500,
        height: 500,
        fill: '#D81B60',
        hasControls: true
    }));

    // Bind and call resize callback
    window.onresize = resize;
    resize();

    // On resize...
    function resize() {
        // ...set canvas size to window size
        canvas.setWidth(window.innerWidth);
        canvas.setHeight(window.innerHeight);
    }
</script>
</body>
</html>

如何同时使用 fabric.js 和 paper.js 来制作绘图应用程序？

How to use both fabric.js and paper.js to make a drawing app?

javascript

svg

html5-canvas

fabricjs

paperjs