Question

我正在尝试在服务器上绘制一个螺旋栅格示例（link）（运行Node.js）。但是，我遇到的问题是我的路径没有显示在导出的帧上，我只能看到下载的图像。可能是我身边的一个愚蠢的错误，但是，通过谷歌和文档查看的日子并没有帮助我解决问题。

我做了什么：

添加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(){});

Answer 1

这对我有用。您需要使用系统中的图像。自己加载图像然后使用它

<!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>

在服务器端实现Paper.js螺旋栅格示例

1 个答案: