Implementieren eines Paper.js-Spiralrasterbeispiels auf der Serverseite

Ich versuche, ein Spiralrasterbeispiel (link) auf einem Server (mit Node.js) zu zeichnen. Ich habe jedoch ein Problem, bei dem mein Pfad nicht im exportierten Bild angezeigt wird und ich nur das heruntergeladene Bild sehen kann. Wahrscheinlich ein dummer Fehler auf meiner Seite, aber die Tage, in denen ich mich durch Google und die Dokumentation umsah, halfen mir nicht, ein Problem zu lösen.Implementieren eines Paper.js-Spiralrasterbeispiels auf der Serverseite

Was ich tat:

hinzufügen paper. Präfixe
geändert +/- entsprechenden add() und subtract()
Versucht einen Pfad innerhalb einer Schicht vor.

Hier ist mein Code:

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;

aufgerufen, natürlich, wie folgt aus:

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

Quelle

2015-01-09 dmee3

ich mit der Verwendung von paper.js innen Node.js nicht vertraut bin, aber ich würde versuchen, den Blick nach dem Ziehen zu aktualisieren - versuchen Sie, * paper.view.update () * am Ende Ihres Zeichnungscodes –

Der Link zum Spiralraster-Beispiel sollte eine Gesundheitswarnung haben! ;) –

@Nicholas, danke für den Vorschlag, ich werde es versuchen, wenn ich eine Sekunde bekomme. Ein Nodejs-Beispiel, das im Repo enthalten war, zeichnete jedoch auch einige Pfade und zeigte sie erfolgreich ohne diese Zeile an. Seltsam:/ – dmee3

Hier ist es für mich funktioniert. Sie müssen ein Bild von Ihrem System verwenden. Ownload ein Bild und dann verwenden,

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

Quelle

2015-06-24 19:14:51

Hey, Ritesh! Danke für deine Antwort. Ich habe das clientseitige Beispiel bereits implementiert. Frage bezüglich des Zeichnens in Node.js (auf der Serverseite), um das gerenderte Bild an den Benutzer zurückzugeben (und so den Auftrag auf meinen Server zu übertragen, wo er zwischengespeichert werden könnte). – dmee3

Implementieren eines Paper.js-Spiralrasterbeispiels auf der Serverseite

Antwort

Verwandte Themen