我试图在服务器上(运行Node.js)绘制一个螺旋形的栅格示例(link)。但是，我遇到的问题是我的路径未显示在导出的框架上，并且只能看到下载的图像。但是，从我的 Angular 看，这可能是一个愚蠢的错误，但是几天浏览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(){});
最佳答案
在这里对我有用。您需要使用系统中的镜像。拥有图片，然后使用它
<!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>
关于javascript - 在服务器端实现Paper.js螺旋栅格示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27865732/