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

Question

I want to make a drawing app and I can't get the basic functionality to pan a layer nor to edit the svgs and scale, transform. 我想制作一个绘图应用程序，但无法获得平移图层或编辑svgs以及缩放，转换的基本功能。

With paper.js the canvas can be easily resized and fit a div but I need the fabric.js to move and scale objects. 使用paper.js ，可以轻松调整画布的大小并适合div，但我需要用fabric.js来移动和缩放对象。 Fabric does not resize or fit a div . 织物无法调整尺寸或适合div 。

In html I have this : <canvas id="canvas" resize></canvas> 在html中，我有这个： <canvas id="canvas" resize></canvas>

and css : 和CSS：

#canvas {

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

With this code I can resize the window and the canvas. 使用此代码，我可以调整窗口和画布的大小。

But when I use fabric.js it goes back to 300 x 150 and doesn't resize: 但是，当我使用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

I don't think that using fabric.js with paper.js is a good idea as they might have some conflicting points. 我认为将fabric.js与paper.js fabric.js使用paper.js一个好主意，因为它们可能存在一些矛盾之处。
If what you lack from fabric.js is the ability to resize the canvas, here is a fiddle demonstrating how you can do. 如果fabric.js缺乏调整画布大小的功能，那么这里有个小提琴，展示了如何做。

<!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 个解决方案

解决方案1
1 已采纳 2019-06-06 07:38:49

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-06-06 07:38:49

解决方案1
1 已采纳 2019-06-06 07:38:49