Javascript 在服务器端实现Paper.js螺旋光栅示例_Javascript_Node.js_Raster_Paperjs_Spiral

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

javascript node.js

Javascript 在服务器端实现Paper.js螺旋光栅示例,javascript,node.js,raster,paperjs,spiral,Javascript,Node.js,Raster,Paperjs,Spiral,我试图在服务器（运行Node.js）上绘制一个螺旋光栅示例（）。但是，我面临的问题是，我的路径没有显示在导出的帧上，我只能看到下载的图像。然而，对我来说，这可能是一个愚蠢的错误，几天来浏览谷歌和文档并没有帮助我解决一个问题我所做的：添加纸张。前缀将+/-更改为相应的add（）和subtract（）尝试在层中显示路径这是我的密码： var paper = require('paper'); var fs = require('fs'); var drawer = {}; var c

我试图在服务器（运行Node.js）上绘制一个螺旋光栅示例（）。但是，我面临的问题是，我的路径没有显示在导出的帧上，我只能看到下载的图像。然而，对我来说，这可能是一个愚蠢的错误，几天来浏览谷歌和文档并没有帮助我解决一个问题

我所做的：

添加
```
纸张。
```
前缀
将+/-更改为相应的
```
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;

在这里它对我有用。您需要使用系统中的映像。拥有并加载图像，然后使用它

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


螺旋光栅
//请注意：拖放图像仅适用于
//联机提供此脚本时的某些浏览器：
变量路径、位置、最大值；
var计数=0；
var-grow=true；
var光栅=新光栅（'mona'）；
graster.remove（）；
var text=新的PointText（view.bounds.bottomRight-[30,30]）；
text.justification='right'；
text.fontSize=10；
text.content=window.FileReader
? '从桌面拖放图像以栅格化其外观
：'要拖放图像，请使用Webkit、Firefox、Chrome或IE 10'；
重置螺旋（）；
函数onFrame（事件）{
如果（成长）{
if（光栅和（视图.中心-位置）.长度<最大值）{
对于（变量i=0，l=count/36+1；i0）
重置螺旋（）；
}
函数onKeyDown（事件）{
如果（event.key=='space'）{
path.selected=！path.selected；
}
}
函数onDocumentDrag（事件）{
event.preventDefault（）；
}
函数onDocumentDrop（事件）{
event.preventDefault（）；
var file=event.dataTransfer.files[0]；
var reader=new FileReader（）；
reader.onload=函数（事件）{
var image=document.createElement（'img'）；
image.onload=函数（）{
光栅=新光栅（图像）；
graster.remove（）；
重置螺旋（）；
};
image.src=event.target.result；
};
reader.readAsDataURL（文件）；
}
DomEvent.add（文件、{
drop:onDocumentDrop，
dragover:onDocumentDrag，
dragleave:onDocumentDrag
});
身体{
保证金：0；
溢出：隐藏；
}

我不熟悉在Node.js中使用paper.js，但我会尝试在绘图后更新视图-尝试在绘图代码末尾添加paper.View.update（）。指向螺旋光栅示例的链接应该有健康警告！；）@尼古拉斯，谢谢你的建议，我一有空就会试试。然而，repo中包含的Nodejs示例也绘制了一些路径，并在没有该行的情况下成功地显示了它们。奇怪：/伟大的建议@NicholasKyriakides，修复了我对OP问题的体验。我想，样本回购协议不需要该行的原因与浏览器中有时需要该行的原因是一样的：PaperScript足够聪明，可以在引擎盖下消除对它的需要，但需要某种实现方法。我猜示例repo中有一些实现细节，在服务器端具有相同的效果。您是否使用了类似于在画布上绘制节点的内容？您可以使用，或在服务器端绘制。嘿，Ritesh！谢谢你的回答。不过，我已经实现了客户端示例。关于在Node.js（服务器端）中绘制以将渲染图像返回给用户（从而将作业卸载到可以缓存的服务器）的问题。

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