Реализация примера спирального растра Paper.js на стороне сервера

Я пытаюсь нарисовать пример спирального растра (ссылка) на сервере (под управлением Node.js ). Однако я столкнулся с проблемой, когда мой путь не отображается в экспортированном кадре, и я могу видеть только загруженное изображение. Вероятно, это была глупая ошибка с моей стороны, однако дни поиска в Google и документации не помогли мне решить проблему.

Что я сделал:

  • Добавьте префиксы paper.
  • Изменены +/- на соответствующие add() и subtract()
  • Пытался представить путь внутри слоя.

Вот мой код:

var paper = require('paper');
var fs = require('fs');
var drawer = {};

var canvas = new paper.Canvas(1000, 1000);
paper.setup(canvas);

var layer = paper.project.activeLayer;

drawer.drawSpiral = function(url, filename, fn) {   
    var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';
    var raster = new paper.Raster(url);

    raster.onLoad = function() {
        raster.fitBounds(paper.view.bounds);

        var position = paper.view.center;
        var count = 0;
        var max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5;

        var path = new paper.Path();
        path.fillColor = 'black';
        path.closed = true;

        while ((paper.view.center - position).length < max) {
            count++;

            var vector = new paper.Point(count * 5, count / 100);
            var rot = vector.rotate(90);
            var color = raster.getAverageColor(position.add(vector).divide(2));
            var value = color ? (1 - color.gray) * 3.7 : 0;

            rot.length = Math.max(value, 0.2);
            path.add(position.add(vector).subtract(rot));
            path.insert(0, position.add(vector).add(rot));

            position = position.add(vector);
        }

        path.smooth();
        layer.insertChild(0, path);
        layer.fitBounds(paper.view.bounds);
        drawer.exportPNG(filename, fn);  
    };
}

drawer.exportPNG = function(filename, fn) {
    out = fs.createWriteStream(__dirname + '/static/img/' + filename + '.png');
    stream = canvas.pngStream();

    stream.on('data', function(chunk) {
        out.write(chunk);
    });

    stream.on('end', function() {
        fn();
    });
}

module.exports = drawer;

Вызывается, очевидно, так:

var drawer = require('./drawer.js');
drawer.drawSpiral('','abc', function(){});

node.js javascript raster paperjs spiral
person dmee3    schedule 09.01.2015    source источник
comment
Я не знаком с использованием paper.js внутри Node.js, но я бы попытался обновить представление после рисования — попробуйте добавить paper.view.update() в конец вашего кода рисования.   -  person nicholaswmin    schedule 18.01.2015
comment
Ссылка на пример спирального растра должна иметь предупреждение о вреде для здоровья! ;)   -  person Ben Smith    schedule 19.01.2015
comment
@Nicholas, спасибо за предложение, я попробую, когда у меня будет секунда. Однако пример Nodejs, который был включен в репозиторий, также рисовал некоторые пути и успешно отображал их без этой строки. Странный :/   -  person dmee3    schedule 20.01.2015
comment
Отличное предложение @NicholasKyriakides, которое исправило мой опыт решения проблемы ОП. Я предполагаю, что причина, по которой образец репозитория не нуждался в этой строке, была по той же причине, по которой она нужна только иногда в браузере: PaperScript достаточно умен, чтобы устранить необходимость в ней под капотом, но для этого требуется определенный метод реализации. . Я предполагаю, что в примере репозитория есть некоторые детали реализации, которые имеют тот же эффект на стороне сервера.   -  person Simon Robb    schedule 10.07.2015
comment
Вы использовали что-то вроде node-canvas для рисования на холсте с помощью узла? Вы можете использовать CEF, cefpython или phantomjs для рисования на стороне сервера.   -  person arthur.sw    schedule 28.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вот это работает для меня. Вам нужно использовать образ из вашей системы. Загрузите изображение и используйте его

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Spiral Raster</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Please note: dragging and dropping images only works for
        // certain browsers when serving this script online:
        var path, position, max;
        var count = 0;
        var grow = true;
        var raster = new Raster('mona');
        raster.remove();

        var text = new PointText(view.bounds.bottomRight - [30, 30]);
        text.justification = 'right';
        text.fontSize = 10;
        text.content = window.FileReader
                ? 'drag & drop an image from your desktop to rasterize it'
                : 'to drag & drop images, please use Webkit, Firefox, Chrome or IE 10';

        resetSpiral();

        function onFrame(event) {
            if (grow) {
                if (raster && (view.center - position).length < max) {
                    for (var i = 0, l = count / 36 + 1; i < l; i++) {
                        growSpiral();
                    }
                    path.smooth();
                } else {
                    grow = false;
                }
            }
        }

        function growSpiral() {
                count++;
                var vector = new Point({
                    angle: count * 5,
                    length: count / 100
                });
                var rot = vector.rotate(90);
                var color = raster.getAverageColor(position + vector / 2);
                var value = color ? (color.gray) * 3.7 : 0;
                rot.length = Math.max(value, 0.2);
                path.add(position + vector - rot);
                path.insert(0, position + vector + rot);
                position += vector;
        }

        function resetSpiral() {
            grow = true;

            // Transform the raster, so it fills the view:
            raster.fitBounds(view.bounds);

            if (path)
                path.remove();

            position = view.center;
            count = 0;
            path = new Path();
            path.fillColor = 'black';
            path.closed = true;

            position = view.center;
            max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5;
        }

        function onResize() {
            text.remove();
            if (count > 0)
                resetSpiral();
        }

        function onKeyDown(event) {
            if (event.key == 'space') {
                path.selected = !path.selected;
            }
        }

        function onDocumentDrag(event) {
            event.preventDefault();
        }

        function onDocumentDrop(event) {
            event.preventDefault();

            var file = event.dataTransfer.files[0];
            var reader = new FileReader();

            reader.onload = function ( event ) {
                var image = document.createElement('img');
                image.onload = function () {
                    raster = new Raster(image);
                    raster.remove();
                    resetSpiral();
                };
                image.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }

        DomEvent.add(document, {
            drop: onDocumentDrop,
            dragover: onDocumentDrag,
            dragleave: onDocumentDrag
        });
    </script>
  <style>
  body {
    margin: 0;
    overflow: hidden;
  }
  </style>
</head>
<body>
    <canvas id="canvas" resize style="background-color:white"></canvas>
    <img width="512" height="512" id="mona" style="display: none;" src="it_follows.jpg">
</body>
</html>
person Ritesh Karwa    schedule 24.06.2015
comment
Эй, Ритеш! Спасибо за Ваш ответ. Однако я уже реализовал пример на стороне клиента. Задан вопрос о рисовании в Node.js (на стороне сервера), чтобы вернуть визуализированное изображение пользователю (и, таким образом, перенести задание на мой сервер, где оно может быть кэшировано). - person dmee3; 26.06.2015