Question

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

使用paper.js可以轻松调整画布的大小并适合div，但是我需要fabric.js才能移动和缩放对象。面料无法调整尺寸或适合div。

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

和CSS：

#canvas {

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

使用此代码，我可以调整窗口和画布的大小。

但是当我使用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缺少调整画布大小的功能，那么这里有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制作绘图应用程序？

1 个答案: