Как использовать fabric.js и paper.js для создания приложения для рисования? - PullRequest
Новая
       60

Как использовать fabric.js и paper.js для создания приложения для рисования?

0 голосов
/ 05 июня 2019

Я хочу создать приложение для рисования и не могу получить базовую функциональность для панорамирования слоя или редактирования 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();
   }

1 Ответ

1 голос
/ 06 июня 2019

Я не думаю, что использование fabric.js с paper.js является хорошей идеей, поскольку они могут иметь некоторые противоречивые моменты.
Если вам не хватает 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>
...